Html5 canvas 是否可能从html5画布的本地文件图像生成_Html5 Canvas_Todataurl

Html5 canvas 是否可能从html5画布的本地文件图像生成

html5-canvas

Html5 canvas 是否可能从html5画布的本地文件图像生成,html5-canvas,todataurl,Html5 Canvas,Todataurl,我的画布有从本地文件或从互联网上的图像编程生成的图像。当我尝试使用toDataURl函数保存它时，我得到了一个安全错误。我如何在没有服务器的情况下保存结果，只使用js，这可能吗我知道，但也许有办法绕过这条规则如果需要，我所有的代码都在里面真丢人！不要绕过为用户提供安全的规则满足CORS安全性并仍然获得所需内容的关键是让用户选择要加载到画布中的图像文件如果用户选择该文件，CORS安全性将得到满足，您可以根据需要使用画布，包括使用canvas.toDataURL保存画布以下是允许用户从本地

我的画布有从本地文件或从互联网上的图像编程生成的图像。当我尝试使用toDataURl函数保存它时，我得到了一个安全错误。我如何在没有服务器的情况下保存结果，只使用js，这可能吗

我知道，但也许有办法绕过这条规则

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

真丢人！不要绕过为用户提供安全的规则

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

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

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

添加类型为file的html输入元素用户单击此元素上的browse并选择其文件当用户单击“确定”时，使用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并从第三方网站加载该图像。第三方加载需要一段时间…请耐心等待。以下是一个被此安全错误挫败的用例：当视频通过https提供时，用于获取元素屏幕截图的bookmarklet工作，但在本地打开时不工作，文件为：///协议。图片没有src URL，因为它是由.drawImage生成的。如果文件：///resources上不允许使用HTMLCanvasElement.toDataURL，则本地视频（而非在线视频）将无法使用此实用程序。toBlob也受到同样的限制：/