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

Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.

// Add below code just after creating the image object
img.crossOrigin = "Anonymous";

Here is what the above code is Doing:
1. We are creating an image object.
2. We are setting the crossOrigin property of the image object to Anonymous.
3. We are setting the src property of the image object to the URL of the image.
4. We are creating a canvas object.
5. We are setting the width and height of the canvas object to the width and height of the image object.
6. We are drawing the image object on the canvas object.
7. We are getting the data URL of the canvas object.
8. We are setting the src property of the image object to the data URL of the canvas object.

Similar Posts