我睡眠不足吗？以下代码
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这是绝对不可能的！有人可以解释一下吗？
Answers:
在规格中它说：
每当调用其origin-clean标志设置为false的canvas元素的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中添加as作为第三个参数
fabric.Image.fromURL(imageUrl, function (image) {
//your logic
}, { crossOrigin: "Anonymous" });我遇到了同样的问题，所有图像都托管在同一个域中...因此，如果有人遇到同样的问题，请按照以下步骤解决：
我有两个按钮：一个用于生成画布，另一个用于从画布生成图像。它只对我有用，很抱歉，当我在第一个按钮上编写所有代码时，我不知道为什么。因此，当我单击它时，会同时生成画布和图像...
当代码具有不同的功能时，我总是会遇到此安全问题... = /
我可以使用以下方法使其工作：
将其写在.htaccess源服务器的第一行
Header add Access-Control-Allow-Origin "*"然后，在创建<img>元素时，请执行以下操作：
// jQuery
var img = $('<img src="http://your_server/img.png" crossOrigin="anonymous">')[0]
// or pure
var img = document.createElement('img');
img.src='http://your_server/img.png';
img.setAttribute('crossOrigin','anonymous');我正在使用fabric.js，可以通过使用toDatalessJSON而不是toDataURL来解决此问题：
canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src编辑：没关系。这导致仅将背景图像导出为JPG，而顶部则没有图形，因此它毕竟不是完全有用。