0

我的画布有从本地文件或来自互联网的图像程序生成的图像。当我尝试使用 toDataURl 函数保存它时，出现安全错误。我怎样才能保存结果（没有服务器，只使用 js ），这可能吗？

我知道安全规则，但也许有一些解决方案可以绕过此规则

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

4

1 回答 1

1

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

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

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

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

  1. 添加一个带有 type="file" 的 html 输入元素
  2. 用户单击此元素上的浏览并选择他们的文件
  3. 当用户单击确定时，使用 window.URL.createObjectURL 从他们选择的文件创建一个 URL。
  4. 创建一个新图像并将其源设置为您在 #3 中创建的 URL。
  5. 使用 context.drawImage 在画布上绘制新图像。
  6. 生成的画布符合 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>
于 2014-02-14T21:42:23.843 回答