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

【问题标题】：Is it possible to avoid "The operation is insecure" when using Canvas?使用 Canvas 时是否可以避免“操作不安全”？
【发布时间】：2013-07-20 06:16:46
【问题描述】：

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

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

有人有什么想法吗？

【问题讨论】：

你有使用php的能力吗？
不，这完全是一个基于 Javascript 的项目。
如果您使用来自不同域的图像，SOP 的要点是您无法访问图像数据……您需要 toDataURL 做什么，您可以在您的域上使用代理图片？
该代码稍后将用于为浏览器扩展提供动力，因此我将无法使用纯 Javascript 以外的任何东西。我无法使用任何外部软件或语言。

标签： javascript html canvas html5-canvas kineticjs

【解决方案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";

【讨论】：

不幸的是，我不控制图像来自的域（尽管我确实有权使用它们），所以我想我受到了限制。这是一个无赖，但我理解为什么会有这些限制。我只是希望现在有人可能想出一个解决方法。
@Simon 如果您有权使用您的服务器（PHP、.Net、CGI、Perl 等）安装服务器端程序，那么您可以使用自己的服务器作为代理。 http://myserver/getImage?http//:otherserver/img.png 基本上是将图像流式传输到您的服务器，然后再传输到客户端。
问题是它将用于一个非常高流量的网站，所以我不想在服务器上增加任何负载，也不想设置另一台服务器就是为了这个。没什么大不了。我知道它仍然不能用 Javascript 完成，我很好:)