Question

<!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徽标的画布。从这个画布我想使用“toDataURL（）” - 方法创建一个图像。我在这里遇到安全错误。

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

Chrome说 - 未捕获错误：SECURITY_ERR：DOM例外18

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

Answer 1

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

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

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

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

Answer 2

听起来像是一个CORS问题。如果你可以让视频包含一个＆＃34; Access-Control-Allow-Origin：*＆＃34;响应中的标题，您可以设置video.crossorigin =＆＃34;匿名＆＃34;，然后您可以将其关闭。

我使用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/"

希望它能解决你的问题。

Answer 3

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

Answer 4

雅是一个功能。由于图像在另一台服务器上。检查一下

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

您可以捕获这些例外情况。但是，这对其他浏览器来说也很头疼，也不适合安全。

所以更好的解决方案是在local上下载该图像。并将图像src路径提供给它。

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

4 个答案: