3

我想创建一个小页面，人们可以在其中创建万花筒。我使用了一个可用的脚本并添加了一些图像浏览和保存功能。现在我在将生成的画布数据保存为图像时遇到了一个奇怪的问题。

Firefox 控制台显示：SecurityError: The operation is insecure

  • 调用失败：Canvas2Image.saveAsPNG(oCanvas);

甚至对于来自我自己网站的图片也会发生这种情况 - 那是什么？？？我查看了在 stackoverflow 中找到的一些提示。他们谁也帮不上忙。

  • CORS 不能解决问题。
  • .htaccess 条目无效：标头始终设置 Access-Control-Allow-Origin *

另一个人似乎也有同样的问题： 如何允许跨域访问 imgs 和 canvas？

有人可以帮我解决这个奇怪的事情吗？

非常感谢！

这里是测试站点：http ://www.13lumen.de/kaleidoscopetest

4

2 回答 2

5

要完成 CORS 兼容性...

在客户端，您还必须设置 Image 对象的 crossOrigin 属性。

var img = new Image();
img.crossOrigin="anonymous";
img.src="yourImage.png";

因此，您还需要在 canvas2Image.js 中设置 crossOrigin 属性（大约第 158 行）。

其他好的参考

这是在您的网站上启用跨域传输的好链接：

http://enable-cors.org/

配置站点后，使用它来测试 CORS 兼容性：

http://client.cors-api.appspot.com/client#?client_method=GET&client_credentials=false&server_url=http%3A%2F%2Fatlantacodingcompany.com%2Fimages%2Fhouse1.jpg&server_enable=true&server_status=200&server_credentials=false&server_tabs=remote

在您自己的网站符合 CORS 标准之前，您可以使用 dropbox.com 测试您的网站。

  • 注册一个免费的 dropbox.com 帐户。
  • 暂时将您的图像放在“公共”文件夹中。
  • 右键单击任何公共图像并为该文件“复制公共链接”。
  • 在客户端：使用 crossOrigin="anonymous" 属性加载您的图像。
  • 您的图像将暂时符合 CORS！
于 2013-10-25T20:20:05.240 回答
-1

图像来自的服务器上的 .htaccess 条目必须是：

Header add Access-Control-Allow-Origin "*"
于 2013-10-26T12:54:14.560 回答