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.

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, Nov 05 '14 at 00: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, Nov 05 '14 at 00:19

score 4 · Answer 1 · answered Nov 05 '14 at 00:44

4

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

answered Nov 05 '14 at 00:44

Travis J

81,153
41
202
273

1

This didn't work. I'm using only local images! That's the weird thing. Please look at the update. Thanks SO much for the help! – Markus Hallcyon Nov 05 '14 at 01:18

score -1 · Answer 2 · edited May 23 '17 at 12:25

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

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

2 Answers2