我有一个 HTML Canvas (使用 KineticJS,但是 Canvas 爱好者应该仍然插话)从另一个域加载图像,将其放置到 Canvas 上并覆盖一些其他信息以生成最终图像。当我尝试使用 canvas.toDataURL() 输出文件时,我收到消息“操作不安全。”,显然是由于跨域限制。
我想知道是否有人知道解决此错误的任何方法(最好是跨浏览器兼容)。我在想一个解决方案是将 Canvas 复制到另一个 Canvas ,有点像屏幕截图,但我找不到任何方法来避免错误,因为我认为它会复制所有 Canvas 属性以及
有没有人有什么想法?
最佳答案
如果图像来自您无法控制的域,那么您就会遇到 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";
关于javascript - 使用 Canvas 时是否可以避免 "The operation is insecure"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17771882/