How to fix getImageData() error ‘The canvas has been tainted by cross-origin data’ in HTML?

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 tains 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 −

img.crossOrigin = "Anonymous";

This works if the remote server sets the header aptly −

Access-Control-Allow-Origin "*"

Updated on: 04-Mar-2020

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started