javascript - 使用 Canvas 时是否可以避免 "The operation is insecure"？

Question

我有一个 HTML Canvas (使用 KineticJS，但是 Canvas 爱好者应该仍然插话)从另一个域加载图像，将其放置到 Canvas 上并覆盖一些其他信息以生成最终图像。当我尝试使用 canvas.toDataURL() 输出文件时，我收到消息“操作不安全。”，显然是由于跨域限制。

我想知道是否有人知道解决此错误的任何方法(最好是跨浏览器兼容)。我在想一个解决方案是将 Canvas 复制到另一个 Canvas ，有点像屏幕截图，但我找不到任何方法来避免错误，因为我认为它会复制所有 Canvas 属性以及

有没有人有什么想法？

Answer 1

如果图像来自您无法控制的域，那么您就会遇到 CORS 限制。

如果您有权配置自己的服务器，则可以通过设置此标题来启用跨源共享(执行此操作时阅读有关服务器安全的更多信息):

Access-Control-Allow-Origin: <origin> | *

或者，如果您将图像托管在支持 CORS 的网站(如 www.dropbox.com)上，您可以获取图像而不会出现如下安全错误:

var image1=new Image();
image1.onload=function(){
    context.drawImage(image1,0,0);
}
image1.crossOrigin="anonymous";
image1.src="https://dl.dropboxusercontent.com/u/99999999/yourCORSenabledPic.jpg";