The canvas has been tainted by cross-origin data.

[petertenhoor]

Hi there,

I use color-thief.js on my website and app to generate personalized color skins. The source image used for this is a bannerimage. The url of this bannerimage is retrieved using the YouTube Data API V3 and externally stored. An example of one of this images is:

https://yt3.ggpht.com/-gnl4NYqCQ7c/V01wwjwmNYI/AAAAAAAAAeQ/VFC8dO5UInompWUnQ8eZ250sjJ9MmBCFwCL8B/w2560-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no/KickXGamesBANNERV3GROOT.jpg

Using this externally stored image with color-thief.js gave me this error at first:

"Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."

I managed to fix this by adding the tag 'crossorigin="anonymous"' to my image element. Sadly the server where these images are stored no longer accepts this, so I was forced to remove the crossorigin tag from the image element, which means that the same error is back once again.

Any advice on how to fix this? I'd like to keep using your library.

Best regards,

Peter ten Hoor

[zcrowe]

@petertenhoor did you either get this resolved or find an alternative?

[petertenhoor]

Hi @zcrowe. I did manage to work around this issue by using a Cors Anywhereproxy. You can use php or node to do this.

Example with node: https://github.com/Rob--W/cors-anywhere

Example with php: https://github.com/softius/php-cross-domain-proxy

Good luck!

[zcrowe]

@petertenhoor you're a scholar and a gent sir :) Thanks 👍

[achyutjhunjhunwala]

@petertenhoor Even after using Cors Anywhere, i can see in DOM that proxied URL in image tag but it still gives the same error.
If I use http://0.0.0.0:8081/my-actual-url its says canvas tainted, if i use just 0.0.0.0:8081, the image Object height property is 0 and i guess it takes the whole image.

Do you have an example of the implementation

[landyde]

It's weird the way cors request work, I also had the same problem, the only way I found is to download images on local ... That's not cool I know,

If you use this lib with a nodejs server it will be easy with filesystem but if you are in a web browser (like me I was) I think you have to download the image before with another back-end script

[lokesh]

I've added information around CORS and testing locally in to the FAQ section on the demo page: https://lokeshdhakar.com/projects/color-thief/#faq

If there are unanswered questions that are still active around this issue I'll happily reopen. Let me know. Thanks.