失败的crossOrigin访问画布toDataUrl

Question

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

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

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

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

• CORS没有解决问题.
• .htaccess条目无效:标题始终设置Access-Control-Allow-Origin*

另一个人似乎有同样的问题: 如何允许跨域访问imgs和画布？

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

非常感谢!

这是测试网站: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标准!