使用Canvas时是否可以避免“操作不安全”？

Question

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

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

有没有人有任何想法？

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";