Question

我的画布具有从本地文件或来自互联网的图像程序生成的图像。当我尝试使用toDataURl函数保存它时，我得到了安全错误。如何保存结果（没有服务器，仅使用js）并且可能吗？

我知道security rule但也许有一些解决方案可以绕过这条规则

如果需要，我的所有代码都在github

Answer 1

耻！不要绕过为我们的用户提供安全性的规则。

满足CORS安全性并仍然获得所需内容的关键是让用户选择您需要加载到画布中的图像文件。

如果用户选择该文件，则CORS安全性得到满足，您可以根据需要使用画布（包括使用canvas.toDataURL来保存画布）。

以下是让用户从本地驱动器中选择文件的步骤：

使用type =“file”
用户单击此元素的浏览并选择其文件
当用户单击“确定”时，使用window.URL.createObjectURL从其选定文件中创建URL。
创建新图像并将其源设置为您在＃3中创建的URL。
使用context.drawImage在画布上绘制新图像。
生成的画布符合CORS，因此canvas.toDataURL可以正常工作。

以下是示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    $("#fileInput").change(function(e){
        var URL = window.webkitURL || window.URL;
        var url = URL.createObjectURL(e.target.files[0]);
        var img = new Image();
        img.onload = function() {
                canvas.width=img.width;
                canvas.height = img.height;
                ctx.drawImage(img,0,0);
                ctx.fillStyle="black";
                ctx.fillRect(0,canvas.height-30,canvas.width,30);
                ctx.fillStyle="white";
                ctx.font="18px verdana";
                ctx.fillText("I'm OK with CORS!",5,canvas.height-8);
        }
        img.src = url;
    });

    $("#save").click(function(){
        var html="<p>Right-click on image below and Save-Picture-As</p>";
        html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
        var tab=window.open();
        tab.document.write(html);        
    });

}); // end $(function(){});
</script>
</head>
<body>
    <input type="file" id="fileInput">    
    <button id="save">Save</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

是否可以从html5-canvas的本地文件映像生成

1 个答案: