控制台日志：Uncaught SecurityError：无法在'CanvasRenderingContext2D'上执行'getImageData'：画布已被跨源数据污染

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" />

Answer 2

This question seems as duplication of:

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

The solution is probably the same. When you load your html file from disk using: file://path/to/your/file.html , then Google Chrome and Opera will raise error at line including: imgData = ctx.getImageData(x1,y1,w,h);

Solution is simple: start web server (apache, nginx) put your html file somewhere at web server and load your html file from: http://localhost/somewhere/file.html