失败的crossOrigin访问画布toDataUrl [英] failed crossOrigin Access for canvas toDataUrl
问题描述
我想创建一个网页,人们可以创建万花筒。我使用可用的脚本,并添加了一些图像浏览和保存功能。现在我有一个奇怪的问题,将生成的画布数据保存为图像。
Firefox控制台说:
SecurityError:操作不安全
- 调用失败:Canvas2Image.saveAsPNG(oCanvas);
这种情况甚至出现在我自己的网站的图片 - ???
我检查了一些tipps在这里发现在stackoverflow。他们都没有帮助。
- CORS没有解决问题。
- .htaccess条目无效:标题始终设置Access-Control-Allow-Origin *
另一个人似乎有同样的问题:如何允许跨源访问imgs和画布?
任何人都可以帮助我这个奇怪的事情?
非常感谢!
这里是测试网站: http://www.13lumen.de/kaleidoscopetest
要完成CORS兼容性...
在客户端,您还必须设置Image对象的crossOrigin属性。
var img = new Image();
img.crossOrigin =anonymous;
img.src =yourImage.png;
所以你需要在canvas2Image.js中设置crossOrigin属性。
其他好的参考资料
在您的网站上:
在您配置完网站后,使用此选项测试CORS兼容性:
您可以使用dropbox.com测试您的网站。
- 注册一个免费的dropbox.com帐户。 >
- 暂时将您的图片放在public文件夹中。
- 右键点击任何公开图片并为该文件复制公开链接。
- 在客户端上:使用crossOrigin =匿名属性。
- 您的图片将暂时符合CORS标准!
I wanna create a litte page where people can create a kaleidoscope. I use an available script and added some image browse and Save-Funktionality. Now I have a weird problem with saving the resulting canvas data as an image.
Firefox console says: SecurityError: The operation is insecure
- failed for call: Canvas2Image.saveAsPNG(oCanvas);
And this occured even for pictures which come from my own site - whats that??? I checked out some tipps found here in stackoverflow. None of them could help.
- CORS doesnt fix the problem.
- .htaccess Entry had no effect: Header always set Access-Control-Allow-Origin *
Another guy seems to have same problem: How to allow cross-origin access to imgs and canvases?
Can anybody help me with this weird thing?
Thanks a lot!
Here is the test site: http://www.13lumen.de/kaleidoscopetest
To complete CORS compatibility...
On the client-side you must also set the crossOrigin property of your Image object.
var img = new Image();
img.crossOrigin="anonymous";
img.src="yourImage.png";
So you will need to set the crossOrigin property in your canvas2Image.js also (about line 158).
Other good references
Here's a good link to enable cross-domain transfers on your site:
And after you've configured your site, use this to test CORS compatibility:
Until you get your own site CORS compliant, you can use dropbox.com to test your site.
- Sign up for a free dropbox.com account.
- Temporarily put your images in the "public" folder.
- Right-click any public image and "copy public link" for that file.
- On the client: load your images using the crossOrigin="anonymous" property.
- Your images will temporarily be CORS compliant!
这篇关于失败的crossOrigin访问画布toDataUrl的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!