本地图像的getImageData错误[重复]

Question

我正在使用下一个代码尝试从图像中获取像素颜色

$(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;
      });

我每次都会收到这个错误：

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)

我看到很多关于这个的问题，几乎所有的答案都是=“你无法从另一个域获取图像，这是安全措施”。

好的，但是为什么我的不起作用，图像与 .html 位于同一目录中

Answer 1

问题是你使用的是本地文件file:///C:/User...你需要设置一个域（可以是localhost）