Console Log: Uncaught SecurityError: Failed to execute 'getImageData' in 'CanvasRenderingContext2D': Canvas was corrupted by cross origin data
Hey I'm trying to implement a jquery-plug called by backgroundcheck and it gives me a console log error: "Uncaught SecurityError: Failed to execute 'getImageData' in 'CanvasRenderingContext2D': canvas was corrupted by cross-origin data." I did everything he said to do it in the instructions, but it doesn't work. Any help would be greatly appreciated.
UPDATE:
These are three errors for the main error in the dropdown menu.
calculatePixelBrightness VM682 background-check.min.js:571
processTargets VM682 background-check.min.js:631
check VM682 background-check.min.js:766
Here's a screenshot .
source to share
The error is the result of the image being on a different domain. There is a surprisingly simple tool for this, which is to add an attribute crossDomain = "anonymous"
to the image element itself.
For example,
<img src="http://i.imgur.com/UnnoYbv.jpg" crossOrigin="anonymous" draggable="false" />
source to share
This question seems to be duplicate:
The solution is probably the same. When you load your html file from disk using:, file://path/to/your/file.html
Google Chrome and Opera will throw an error on the line including:imgData = ctx.getImageData(x1,y1,w,h);
The solution is simple: starting a web server (apache, nginx) puts your html file somewhere on the web server and loads your html file from: http://localhost/somewhere/file.html
source to share