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

HTMLWeb DevelopmentFront End Technology

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 "*"
raja
Published on 20-Mar-2018 10:55:42
Advertisements