问题描述
我有一个特定像素的 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)
};