canvas.toDataURL（）和drawImage（）的安全错误

<!doctype html> 
<canvas id="canvas" height="200" width="200"></canvas> 
<div id="new"></div> 
<script> 
var div = document.getElementById("new"); 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var img = new Image(); 

img.src = 'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png'; 
//img.src = 'local.png'; 

img.onload = function(){ 
    //draws the image on the canvas (works) 
    ctx.drawImage(img,0,0,200,200); 

    //creates an image from the canvas (works only for local.png) 
    var sourceStr = canvas.toDataURL(); 

    //creates the img-tag and adds it to the div-container 
    var newImage = document.createElement("img"); 
    newImage.src = sourceStr; 
    div.appendChild(newImage); 
} 
</script>

此脚本创建一个带有html5-logo的画布。在这个画布中，我想使用“toDataURL（）”方法创建一个图像。在这里我收到一个安全错误。canvas.toDataURL（）和drawImage（）的安全错误

火狐说 - 错误：未捕获的异常：[异常... “安全错误” 代码： “1000” nsresult： “0x805303e8（NS_ERROR_DOM_SECURITY_ERR）”

铬说 - 未捕获的错误：SECURITY_ERR：DOM异常18

如果我使用脚本与服务器上的图像，它工作正常。所以它认为这次它真的是一个功能，而不是一个错误。有没有人有一个想法，我可以如何使用画布创建一个图像与其他服务器的图像形式？顺便说一句：如果您在没有Web服务器的情况下将站点作为本地文件运行，则会发生错误。

来源

2012-02-18 martin

您是否找到答案？我有同样的问题，甚至发生在同一台服务器的图像上。一旦任何图像被绘制到画布中，整个画布就变得无法访问。 – Kokodoko 2014-05-15 16:56:35

我认为这个错误是对同一个源策略的扩展，基本上它不允许你从另一个服务器上操作资源。虽然不安全，但您可以在服务器中构建一个检索外部资源的方法：myserver.com/?external=url/path/to/img ...这将在理论上起作用。

来源

2012-02-18 22:09:38 Ryan

你是对的，这是一个安全功能，而不是一个错误。

如果读取图像（例如toDataURL或getImageData）可以工作，您还可以从访问者的上下文中读取https://mail.google.com/mail/获取他的电子邮件或其他内容。

因此，画布元素有一个原点清洁标志，当外部图像写入画布时设置该标志。在这种情况下，你不能再读取它。

您可以阅读更多关于此主题here。

来源

2012-02-18 22:16:19 copy

现在这个链接被破坏了，但我相信现在可以在这里找到信息（http://www.w3.org/TR/html5/embedded-content-0.html#security-with-canvas-elements）。 – 2013-04-17 21:21:09

-1

这是一个功能。由于图像位于另一台服务器上。勾选此

Why does canvas.toDataURL() throw a security exception?

您可以捕获这些异常。但是这对于其他浏览器来说也是头疼的事情，也不适合安全。

所以更好的解决方案是将该图像下载到local.And图像src路径。

来源

2012-02-20 18:56:45

听起来像是一个CORS问题。如果您可以在视频中添加“访问控制 - 允许来源：*”标题，并且您可以设置video.crossorigin =“匿名”，那么您可以将其关闭。

我使用Charles Web Proxy将标题添加到任何想要使用的图像或视频。

见https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

请参见https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

下面是用图像加工一个小提琴：http://jsfiddle.net/mcepc44p/2/

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

var button = document.getElementById("button"); 

var image = new Image(); 
image.crossOrigin = "anonymous"; // This enables CORS 
image.onload = function (event) { 
    try { 
     canvas.drawImage(image, 0, 0, 200, 200); 
     button.download = "cat.png"; 
     button.href = canvas.canvas.toDataURL();   
    } catch (e) { 
     alert(e); 
    } 
}; 
image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"

希望它可以解决您的问题。

来源

2016-05-01 14:24:59

canvas.toDataURL（）和drawImage（）的安全错误

回答

相关问题