是我睡眠不足还是怎么的？下面这段代码
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
这绝不可能行不通！任何人都可以解释一下吗？
在规格中它说：
每当调用其 origin-clean 标志设置为 false 的画布元素的 toDataURL() 方法时，该方法必须引发 SECURITY_ERR 异常。
如果图像来自另一台服务器，我认为您不能使用 toDataURL()
在对我有用的图像对象上设置交叉原点属性（我使用的是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;
};
如果图像托管在设置了 Access-Control-Allow-Origin 或 Access-Control-Allow-Credentials 的主机上，您可以使用跨源资源共享 (CORS)。有关更多详细信息，请参见此处（crossorigin 属性）。
您的另一个选择是让您的服务器拥有一个端点来获取和提供图像。（例如http://your_host/endpoint?url=URL）这种方法的缺点是延迟和理论上不必要的获取。
如果有更多替代解决方案，我有兴趣了解它们。
如果图像托管能够为图像资源提供以下 HTTP 标头并且浏览器支持 CORS，则似乎有一种方法可以防止这种情况：
访问控制允许来源：* 访问控制允许凭据：true
最后我找到了解决方案。只需要crossOrigin在fromURLfunc 中添加第三个参数
fabric.Image.fromURL(imageUrl, function (image) {
//your logic
}, { crossOrigin: "Anonymous" });