canvas.toDataURL() 和 drawImage() 的安全错误答案

【问题标题】：Security Error with canvas.toDataURL() and drawImage()canvas.toDataURL() 和 drawImage() 的安全错误
【发布时间】：2012-03-09 19:33:23
【问题描述】：

<!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()”方法。在这里我得到一个安全错误。

Firefox 说 - 错误：未捕获的异常：[异常...“安全错误”代码：“1000”nsresult：“0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)”

Chrome 说 - 未捕获的错误：SECURITY_ERR: DOM Exception 18

如果我在服务器上使用带有图像的脚本，它可以正常工作。所以它认为这一次它真的是一个特性而不是一个错误。有谁知道我如何使用画布创建图像而无需其他服务器的图像？顺便说一句：如果您在没有网络服务器的情况下将站点作为本地文件运行，则会发生错误。

【问题讨论】：

你找到答案了吗？我有同样的问题，它甚至发生在来自同一服务器的图像上。一旦任何图像被绘制到画布中，整个画布就变得无法访问。

标签： javascript firefox google-chrome html5-canvas

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

因此，canvas 元素有一个 origin-clean 标志，该标志是在将外部图像写入canvas 时设置的。在这种情况下，您将无法再从中读取。

您可以阅读有关此主题的更多信息here。

【讨论】：

链接现在失效了，但我相信现在可以找到信息here。

【解决方案3】：

是的，这是一个功能。由于图像在另一台服务器上。检查这个

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

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

所以更好的解决方案是在本地下载该图像。并给出该图像的 src 路径。

【讨论】：