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

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.

[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?

[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