3

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

Community
  • 1
  • 1
Marcel
  • 29
  • 1
  • 2

2 Answers2

5

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:

http://enable-cors.org/

And after you've configured your site, use this to test CORS compatibility:

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

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!
markE
  • 102,905
  • 11
  • 164
  • 176
  • Hey Mark. The reason why I ask here: I have already set the crossOrigin property at all lines where src property is set. Nothing happens. If I set the crossOrigin before the first src property setting no image is loaded - its really weird. The second fact: All my images come from the same server where the canvas script is hosted. I thought in this case I dont need any CORS. Can someone explain me where I made a mistake? Please check the sourcecode of my testsite. Thanks. – Marcel Oct 26 '13 at 11:29
  • Try a test using an image pulled from dropbox.com (see above) to confirm your client code is CORS compliant. – markE Oct 26 '13 at 11:45
  • I checked again the dropbox test. I forgot to move the image to the public folder. Now the dropbox test works fine. Wow. Now my Question: How can I switch my server to a CORS enabled server? At this time the first line in my .htaccess is: `Header add Access-Control-Allow-Origin "http://www.13lumen.de"` – Marcel Oct 26 '13 at 12:44
  • OK. I found the solution: The .htaccess entry has to be: `Header add Access-Control-Allow-Origin "*"` - Now everything is fine. Thankyou! – Marcel Oct 26 '13 at 12:52
-1

The .htaccess entry on the server where the images come from has to be: 

Header add Access-Control-Allow-Origin "*"
Marcel
  • 29
  • 1
  • 2