Console Log: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data

Question

Hey I'm trying to implement a jquery plug in called backgroundcheck and it gives me the console log error of: "Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data." I have done everything he says to do in the instructions but it doesn't work. Any help would be greatly appreciated.

UPDATE:

These are the three errors under the main error in the drop down 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 of it as well.

Answer 1

jsFiddle Demo

The error is a result of the image being located at a different domain. There is a surprisingly simple remedy to this though, which is to add the attribute crossDomain = "anonymous" to the image element itself.

For example,

<img src="http://i.imgur.com/UnnoYbv.jpg" crossOrigin="anonymous" draggable="false" />