0

As the title says, I've enabled CORS for all of the images, but I'm still getting errors when trying to throw them onto a canvas and then extract that canvas (Chrome and FF). I ran a little sniffer on one of the images to test it out, and it seems to be in fact returning the correct headers:

Access-Control-Allow-Origin: *

Am I missing something?

user1807782
  • 451
  • 1
  • 4
  • 17
  • 2
    ...and you're also specifying the crossOrigin="anonymous" attribute on the image objects? If so, that's not the problem and we need a bit more code. – markE Jan 22 '14 at 23:10
  • That solved the problem, @markE. Thank you. I'm also trying to colorize these images using PaintbrushJS, but now it's giving me "Cross-origin image load denied by Cross-Origin Resource Sharing policy." Any idea? EDIT: It seems like it might be because all my images are being loaded dynamically through JS. – user1807782 Jan 22 '14 at 23:33

1 Answers1

0

You need to request CORS usage for the server, just add this attribute to the image tag:

<img crossOrigin="anonymous" ... />

or dynamically from JavaScript, use it as property (assuming img is created or obtained already):

var img = new Image;
img.onload = callback;
img.crossOrigin = '';   /// = anonymous
img.src = '...';

If you have multiple images to load you can use an image loader that supports cross-origin request (for example my YAIL loader where you can request all or individual images to be loaded using CORS).