javascript - Console Log: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingCo

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.

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.

• javascript
• jquery
• plugins
• jquery-plugins
• console

Share Improve this question Follow edited Nov 5, 2014 at 1:17 Markus Hallcyon asked Nov 4, 2014 at 23:56 Markus HallcyonMarkus Hallcyon 37122 gold badges77 silver badges1616 bronze badges 4

• Why is your link to foo.? – Travis J Commented Nov 4, 2014 at 23:59
• oops, sorry, fixed it – Markus Hallcyon Commented Nov 5, 2014 at 0:01
• Can you include some of the code you were using to get the error? It is not obvious when looking at the github readme where it would be caused. – Travis J Commented Nov 5, 2014 at 0:03
• Thats the thing, I literally copied verbatim what he did so I'm really just looking for information about this error log, it seems really rare and there arent many pages about it. – Markus Hallcyon Commented Nov 5, 2014 at 0:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./UnnoYbv.jpg" crossOrigin="anonymous" draggable="false" />

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