为什么canvas.toDataURL()抛出安全异常？
为什么canvas.toDataURL()抛出安全异常？
提问于 2010-03-06 06:00:18
我睡得不够好还是怎么的？下面的代码
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这不可能不起作用！有谁能解释一下这个吗？
回答 6
Stack Overflow用户
发布于 2013-04-18 03:10:46
在图像对象上设置跨域属性对我很有效(我使用的是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;
};Stack Overflow用户
发布于 2011-11-09 20:31:19
如果映像托管在设置了Access-Control-Allow-Origin或Access-Control-Allow-Credentials的主机上，则可以使用跨域资源共享(CORS)。See here (the crossorigin attribute) for more details.
您的另一种选择是让您的服务器有一个端点来获取和提供映像。(例如，http://your_host/endpoint?url=URL)这种方法的缺点是延迟和理论上不必要的获取。
如果有更多的替代解决方案，我会很感兴趣的。
Stack Overflow用户
发布于 2017-01-07 00:36:17
最后我找到了解决方案。只需在fromURL函数中添加crossOrigin作为第三个参数
fabric.Image.fromURL(imageUrl, function (image) {
//your logic
}, { crossOrigin: "Anonymous" });页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2390232
复制相关文章
相似问题