getImageData error with a local image

Question

Im using the next code trying to get pixel color from a image

$(document).ready(function(){
         var img = document.getElementById('my-image');
         var canvas = document.createElement('canvas');
         canvas.width = img.width;
         canvas.height = img.height;
         canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
         var pixelData = canvas.getContext('2d').getImageData(1, 1, 1, 1).data;
      });

I get this error everytime:

index.html:20 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at HTMLDocument.<anonymous> (file:///C:/Users/ariadna/Desktop/Programacion/Test/public/index.html:20:50)
    at j (http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js:2:27295)
    at Object.fireWith [as resolveWith] (http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js:2:28108)
    at Function.ready (http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js:2:29942)
    at HTMLDocument.J (http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js:2:30308)

I see a lot of questions about this and almos all answeres are= "U can't get a image from another domain, its is security measure".

Ok, but why mine don't work, the image is in the same directory as the .html

img src has the same domain/host/post that your actual page/site? — UXDart, May 25 '17 at 14:57
@UXDart is simple index.html, the image is in the same folder — CristianS9, May 26 '17 at 06:08
hmm... `file:///C:/User` you need to do this on a domain, I don't think it will work on local files — UXDart, May 26 '17 at 10:01

score 0 · Answer 1 · answered May 26 '17 at 10:03

0

the problem is that you are using local files file:///C:/User... you need to set up a domain (it can be localhost)

answered May 26 '17 at 10:03

UXDart

2,500
14
12

getImageData error with a local image

1 Answers1