遍历具有 x,y 位置的对象数组以获取 html 画布的像素 rgb 值

如何解决遍历具有 x,y 位置的对象数组以获取 html 画布的像素 rgb 值

我有一个特定像素的 x,y 位置数组，我需要从中获取 RGB 值。我的代码得到 0,0 结果，就像现在一样。有什么帮助吗？

const topArray = [
    {x: 198,y: 132},{x: 219,y: 138},{x: 233,y: 157},{x: 225,y: 179},{x: 201,y: 187},{x: 177,y: 176},{x: 163,y: 156},{x: 178,];

avyGridTop = [];

topArray.forEach(pickArray);



function pickArray(event) {
  var x = event.x;
  var y = event.y;
  var pixel = ctx.getimageData(x,y,1,1);
  var data = pixel.data;

  const rgba = [data[0],data[1],data[2]];
    avyGridTop.push(rgba);

};

解决方法

我通过将 topArray.forEach(pickArray) 移动到 img.onload 中来解决这个问题。

这样它会在 img 加载后触发。

var img = new Image();
img.src = './images/avy20210303.png';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
img.onload = function() {
  ctx.drawImage(img,0);
  img.style.display = 'none';
  console.log("img loaded");
    topArray.forEach(pickArray);
};

function pickArray(event) {
  var x = event.x;
  var y = event.y;

  console.log(ctx);
  var pixel = ctx.getImageData(x,y,1,1);
  var data = pixel.data;
  var r = data[0];
  var g = data[1];
  var b = data[2];

  var rgba = {r: data[0],g: data[1],b: data[2]};
console.log(rgba);
    avyGridTop.push(rgba)

};