失败的crossOrigin访问画布toDataUrl

Question

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

Firefox控制台说： SecurityError：操作不安全

• 调用失败：Canvas2Image.saveAsPNG（oCanvas）;

这甚至发生在我自己的网站上的图片 - 这是什么？ 我查看了一些在stackoverflow中找到的tipps。他们都没有帮助。

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

另一个人似乎有同样的问题：How to allow cross-origin access to imgs and canvases?

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

非常感谢！

以下是测试网站：http://www.13lumen.de/kaleidoscopetest

Answer 1

完成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标准！

Answer 2

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

Header add Access-Control-Allow-Origin "*"