Search code examples
javascriptcanvascross-domaincorspixastic

Canvas tainted with CORS images

I'm having trouble using CORS-enabled images with canvas (Pixastic).

On server I have

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

in my htaccess file.

On client side I tried setting the crossorigin attribute in HTML, like so :

<img src="http://myseconddomain/image.jpg" crossorigin="anonymous" />

without success. After that I tried in Pixastic's code :

var el = elements[i];
el.crossOrigin = 'anonymous';

Does not work either.

I also disabled chrome's cache, but it doesn't help.

Chrome is logging :

Uncaught Error: SECURITY_ERR: DOM Exception 18 
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

even if HTML looks fine (crossorigin attribute is set), image headers look fine (Access-Control-Allow-Origin)... I don't know what to try next, so any advice is welcome !

Unfortunately I can't provide any link since this app is far from production as you can guess.

Solution

  • I found a way, I'll post it here so hopefully it'll help someone someday.

    It happened I wasn't messing with the right function in Pixastic's code, as the init() function is not always called as I first thought.

    I added the following line in the Pixastic.process() function :

    dataImg.crossOrigin = "anonymous";

    And it did the trick.