为什么canvas.toDataURL（）抛出安全异常？
我没有得到足够的睡眠或什么？ 这下面的代码
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.comhttp://img.dovov.cominterface/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的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; };
如果映像驻留在设置访问控制允许源或访问控制允许证书的主机上，则可以使用跨源资源共享（CORS）。 看到这里（crossorigin属性）的更多细节。
您的其他选项是让您的服务器拥有一个端点来提取和提供图像。 （例如， http：// your_host / endpoint？url = URL ）该方法的缺点是延迟和理论上不必要的提取。
如果有更多的替代解决方案，我会有兴趣听到他们。
似乎有一种方法可以防止如果图像托管能够为图像资源和浏览器提供以下HTTP头支持CORS：
access-control-allow-origin：* access-control-allow-credentials：true
它在这里陈述： http : //www.w3.org/TR/cors/#use-cases
我有同样的问题，所有的图像被托管在同一个域…所以，如果有人有同样的问题，这里是我如何解决：
我有两个按钮：一个用于生成画布，另一个用于从画布生成图像。 它只为我工作，对不起，我不知道为什么，当我写在第一个按钮上的所有代码。 所以当我点击它的同时生成画布和图像…
当代码处于不同的功能时，我总是有这个安全问题… = /
你不能在你的ID中输入空格
更新
我的猜测是，图像是在一个不同的服务器上，而不是你正在执行的脚本。 我可以在自己的页面上运行它时复制错误，但是当我使用托管在同一个域上的映像时，它工作正常。 所以这是安全相关的 – 将图像放在您的网站上。 任何人都知道为什么这样？
我能够使用这个工作：
在源服务器的.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');
最后我找到了解决办法。 只需要添加crossOrigin作为fromURL func的第三个参数
fabric.Image.fromURL(imageUrl, function (image) { //your logic }, { crossOrigin: "Anonymous" });
如果您只是在画布上绘制一些图像，请确保您正在加载来自同一个域的图像。
http://www.example.com与example.com不同
因此，请确保您的图片和您的地址栏中的网址是相同的，www是否相同。
