无法从画布获取像素数据

我正在从我的计算机在网页上加载黑白图像，然后在画布上绘制图像。然后我想检索第一个像素的颜色。这是我正在使用的JavaScript函数：

function loadImage(){
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("first");
    ctx.drawImage(img,0,0);
    var z1=ctx.getImageData(0, 0, 1, 1).data[0];
    document.getElementById("1").value=z1;
};

我收到以下错误：

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

有什么想法可以满足我的要求吗？这是我正在从事的一个项目的一部分，我想创建一个遗传算法来绘制给定的图片。该项目的一个重要部分是将初始图像（加载到画布中）中的像素与由伪随机像素填充的画布进行比较。然后，我为像素引入小方差，使其向初始图像发展。

如果我手动绘制画布（使用 fillRect），我可以使用"getImageData"检索像素数据。但是，当我使用图像（drawImage）绘制画布时，出现上述错误。

请帮忙。

编辑：我看过： 如何修复getImageData（）错误 画布已被跨源数据污染？

但事实并非如此。我正在从自己的计算机加载图像。我只需将.html、.js和.png文件放在同一个文件夹中，然后运行.html文件。