Javascript获取图像的像素数据

我需要从我的计算机加载一个png文件，并循环遍历每个像素值。我尝试了canvas，但它与我不理解的跨域内容相冲突

var img = new Image(); 
img.src = "map.png";

var canvas = document.getElementById("secondaryCanvas");
var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, 30, 30);

console.log(ctx.getImageData(0,0,1,1));

---

…有时有效，有时无效？。。。Im绝对丢失

如果直接从文件系统加载页面，则无法读取像素数据。您必须从web服务器加载页面。安装apache并从localhost加载它

关于它有时“起作用”这一事实，它取决于调用getImageData时图像是否已在画布中绘制

如果图像没有被加载，你可以调用GeimGigaDATA，因为你不是在读取图像数据，而是在空白画布上。 如果在image onload事件中调用getImageData，代码将始终失败

var img = new Image(); 
img.onload = function() {
    console.log(this)
    var canvas = document.getElementById("secondaryCanvas");
    var ctx = canvas.getContext("2d");

    ctx.drawImage(img, 0, 0);

    console.log(ctx.getImageData(100,100,1,1));
}
img.src = "map.png";

---

请为我们创建一个代码片段以帮助您。：）也许这个答案会有所帮助，你也可以尝试直接将图像添加到你的应用程序中（例如，在文件夹内，img）。然后在同一个域上获取图像，从而避免CORS错误。