0
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.(…)

This is the console exception I'm getting on chrome however it's strange because I'm not grabbing any information, files or images cross server, everything I'm using is on my computer on a file. I may be misunderstanding what this error means.

Here is the code anyways 

function draw(image,x,y,color = 0) {

context.drawImage(image,x,y);

if(color != 0) {
    var dat = context.getImageData(x,y,image.width,image.height);
    var map = dat.data;
    var len = map.length;
    if(color == "red") {
        for(i = 0;i < len;i += 4 ) {
            map[i + 0] += 50;
            map[i + 1] -= 50;
            map[i + 2] -= 50; 

        }
    }
    context.putImageDate(dat,x,y);
  }
}

The image is loaded from a folder called "images" which is in the same directory as my .html file. Any suggestions on how to fix this? Thank you!

user3628468
  • 111
  • 1
  • 7

1 Answers1

0

If you're using file:// you have to run a local http server.

Easiest way is using python -m http.server (with Python 3) running in application folder. Then you can just access http://localhost:8000

Karol Klepacki
  • 2,070
  • 1
  • 18
  • 30