"The canvas has been tainted by cross-origin data" caused by img attribute order on some browsers

[fernandomachado90]

The crossOrigin attribute allows images that are loaded from external origins to be used in canvas like the one they were being loaded from the current origin. Using images without CORS approval taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. By loading the canvas from cross origin domain, you are tainting the canvas.

You can prevent this by setting crossorigin="anonymous".

However, CRAZILY enough, the order of the attribute on the img element does matter. I've been writing HTML since 2005 and this is the first time I found something like this. The crossorigin attribute must come before the src. On Chrome the order did not matter, but on Safari (and other mobile browsers) it solved the problem.

<img src="...image.jpg" crossorigin="anonymous" /> will result in Unhandled Rejection (SecurityError): The operation is insecure.

while <img crossorigin="anonymous" src="...image.jpg" /> works just fine.

Writing this down here so it can be added to the documentation and hopefully help someone in the future.

[EB-Plum]

this also work within order of codes

const img = new Image();
img.src = '...image.jpg';
img.crossOrigin = 'anonymous';
// not working on some ios safari

const img = new Image();
img.crossOrigin = 'anonymous';
img.src = '...image.jpg';
// this code works

[dmm22]

What if i'm using it on an image url?

let currentImage = data[data.length - 1].data[i].image;

const fac = new FastAverageColor();
fac.getColorAsync(currentImage);

Where would the crossorigin="anonymous" go?

[ShvedDmytro]

this is not working

[zubin-madon]

In my case, the canvas stops displaying the image if I add img.crossOrigin = 'anonymous'; And adding the line in my saveImage() function, just before the line imageToSave.src = canvas.current.toDataURL('image/png', 1.0) also does not work. I have setup cors json via AWS c-line on my server to accept all origins and headers.

[ShahriarKh]

I solved the issue by using a dummy GET parameter in the src. <img crossOrigin="anonymous" src={`${url}?dummy=parameter`} /> (I'm using React) https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome

[armstmol01]

In my case, the canvas stops displaying the image if I add img.crossOrigin = 'anonymous'; And adding the line in my saveImage() function, just before the line imageToSave.src = canvas.current.toDataURL('image/png', 1.0) also does not work. I have setup cors json via AWS c-line on my server to accept all origins and headers.

SAME HERE. I tried the fix w/ the dummy parameter and it also didn't work.

[ALexanderMarginal]

i tryed all ways. It doesn't work for me

[denvudd]

What if i'm using it on an image url?

let currentImage = data[data.length - 1].data[i].image;

const fac = new FastAverageColor();
fac.getColorAsync(currentImage);

Where would the crossorigin="anonymous" go?

Same here

[arilanto]

for me, I have 2 issues relative to cors+canvas :

• img.crossorigin = "anonymous" work (but image.crossOrigin = "anonymous" don't.. ), case matter
• even with crossorigin set to anonymous, context.getImageData throw error : "Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."

[gardur-sa]

If the image doesnt appears, you need to enter into the web using a local host connection. I use to try with XAMMP APACHE. By default, my image doesnt have changes if i wanna change his pixel estructure, somebody have a idea? :c

[elshnkhll]

Have encountered the same issue when trying to get color of the image located in my Roku TV with this URL http://192.168.1.11:8060/query/icon/12.