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

Question

I am getting this error in Chrome and Opera Browsers:

Uncaught SecurityError: Failed to execute \'getImageData\' on \'CanvasRenderingContext2D\': The canvas          


        

Answer 1

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