为什么canvas.toDataURL()会抛出安全异常？

Question

我睡眠不足还是什么？以下代码

var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;

var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
    // draw image
    ctx.drawImage(img, 0, 0)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

抛出这个错误:

SECURITY_ERR: DOM Exception 18

这不可能不起作用!请问有人解释一下吗？

Answer 1

在规格中它说:

每当调用origin-clean标志设置为false的canvas元素的toDataURL()方法时,该方法必须引发SECURITY_ERR异常.

如果图像来自另一台服务器,我认为你不能使用toDataURL()

Answer 2

在图像对象上设置cross origin属性对我有用(我使用的是fabricjs)

    var c = document.createElement("img");
    c.onload=function(){
        // add the image to canvas or whatnot
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src='http://google.com/cat.png';

对于那些使用fabricjs的人来说,这里是如何修补Image.fromUrl

// patch fabric for cross domain image jazz
fabric.Image.fromURL=function(d,f,e){
    var c=fabric.document.createElement("img");
    c.onload=function(){
        if(f){f(new fabric.Image(c,e))}
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src=d;
};

Answer 3

如果映像托管在设置Access-Control-Allow-Origin或Access-Control-Allow-Credentials之一的主机上,则可以使用跨源资源共享(CORS).有关更多详细信息,请参见此处(crossorigin属性).

您的另一个选择是服务器具有获取和提供图像的端点.(例如,http:// your_host/endpoint？url = URL)该方法的缺点是延迟和理论上不必要的提取.

如果有更多替代解决方案,我会有兴趣听到它们.

Answer 4

似乎有一种方法可以防止,如果图​​像托管能够为图像资源和浏览器提供以下HTTP标头,则支持CORS:

access-control-allow-origin: *
access-control-allow-credentials: true

这里说明:http://www.w3.org/TR/cors/#use-cases