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

【问题标题】：Is it possible generated from local file image from html5-canvas是否可以从 html5-canvas 的本地文件图像生成
【发布时间】：2014-03-14 08:37:07
【问题描述】：

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

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

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

【问题讨论】：

标签： html5-canvas todataurl

【解决方案1】：

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

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

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

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

添加一个带有 type="file" 的 html 输入元素
用户在此元素上单击浏览并选择他们的文件
当用户单击确定时，使用 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>

【讨论】：

为什么感到羞耻？我不是网络开发人员，并且在我的生活中第二次看到 js :) 感谢您的回答，但是使用第三方网站的图片是什么意思，有可能吗？
开个玩笑吧 :) 当然，在示例代码中，当您点击“浏览”按钮时，您甚至可以粘贴 http:// URL 并从第 3 方站点加载该图像。（第 3 方加载需要一段时间……请耐心等待）。
这是一个被此 SecurityError 挫败的用例：当通过http(s) 提供视频时，用于获取<video> 元素屏幕截图的书签可以工作，但在本地打开时却不行，使用file:/// 协议。图片没有 src URL，因为它只是由.drawImage() 生成的。如果 HTMLCanvasElement.toDataURL() 不允许在 file:/// 资源上使用，那么这个有用的实用程序对于本地视频会被破坏，但对于在线视频则不会。 .toBlob() 受到同样的限制。 ://