6

I am getting this error in Chrome and Opera Browsers:

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

The code is working fine in Internet Explorer, Mozilla Firefox, and Safari. But I need to fix it in Chrome and Opera. Please help me to find a solution to fix this problem?

I am getting this error at this line

imgData = ctx.getImageData(x1,y1,w,h);
Bo A
  • 3,144
  • 2
  • 33
  • 49
Rakesh
  • 61
  • 1
  • 1
  • 2
  • 1
    Possible duplicate of [getImageData() error The canvas has been tainted by cross-origin data](http://stackoverflow.com/questions/22097747/getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data) – Mosh Feu Jan 21 '16 at 11:34

2 Answers2

15

May be this will help, as you have mentioned cross origin so try this,

 var UimageObj = new Image();

crossOrigin has to be set to enable the canvas data to be saved.The source image should have access-control-allow-origin set to * or a chosen domain

UimageObj.crossOrigin = 'anonymous';   // crossOrigin attribute has to be set before setting src.If reversed, it wont work.  
UimageObj.src = obj_data.srcUser;

Hope it helps.

Aameer
  • 1,366
  • 1
  • 11
  • 30
  • 2
    "crossOrigin attribute has to be set before setting src.If reversed, it wont work." This is important, thanks! – ndequeker Sep 16 '16 at 08:32
5

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

JiriHnidek
  • 523
  • 2
  • 6
  • 14