我睡眠不足了吗？下面的代码：
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
这个应该没有不工作的理由！请问有人可以解释一下吗？
在规范中提到：
每当调用toDataURL()方法的画布元素其起源干净标志设置为false时，该方法必须引发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;
};
如果图像托管能够为图像资源提供以下HTTP头，并且浏览器支持CORS，则似乎有一种方法可以防止这种情况发生：
access-control-allow-origin: * access-control-allow-credentials: true
最后我找到了解决方案。只需要在fromURL函数中添加crossOrigin作为第三个参数即可。
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');
如果你只是在画布上绘制一些图像，请确保从同一个域加载图像。
www.example.com 和 example.com 是不同的。
所以请确保你的图像和浏览器地址栏中的网址是相同的，无论是否带有"www"。
你的ID中不能包含空格。
更新
我猜测图片位于与执行脚本不同的服务器上。当我在自己的页面上运行它时，我能够复制你的错误，但是一旦我使用了在同一域上托管的图像，它就可以正常工作了。所以这与安全有关 - 将图像放在你的网站上。有人知道为什么会这样吗？
canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src
编辑：算了吧。这样导出的只是背景图像，没有上面的绘画，所以实际上并不是很有用。