为什么canvas.toDataURL()会抛出一个安全异常？

Question

为什么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.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

这不可能不管用！有人能解释一下吗？

Answer 1

在规格上面写着：每当调用Canvas元素的toDataURL()方法时，该方法必须引发一个security_err异常，该方法的源-清除标志设置为false。如果图像来自另一台服务器，我认为您不能使用toDataURL()

Answer 2

如果映像托管在设置访问控制-允许-原产地或访问控制-允许-凭据的主机上，则可以使用跨源资源共享(CORS)。有关更多详细信息，请参见此处(跨源属性)。您的另一个选项是让您的服务器拥有一个获取和服务图像的端点。(例如。http://your_host/endpoint?url=URL)这种方法的缺点是延迟和理论上不必要的抓取。如果有更多的替代解决方案，我会有兴趣听到他们。