Question

我有一个画布，想要动态获取像素的颜色。我使用getImageData()来获取包含颜色的数组。我只想调用一次getImageData（）并从中获取所有颜色数据。这是因为在我的用例中，我将遍历包含画布的x，y坐标的100万大小的数组。

但是我无法弄清楚如何使用x，y坐标从图像数组中获取颜色。这是我的代码：

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');

context.beginPath();
context.rect(0, 0, 200, 200);
context.fillStyle = 'black';
context.fill();
context.closePath();

context.beginPath();
context.rect(50, 50, 50, 50);
context.fillStyle = 'red';
context.fill();
context.closePath();

var imageData = context.getImageData(0, 0, 200, 200).data;

console.log('imageData is ', imageData);

for(var x = 0; x < 10; x++) {

    var x = Math.floor(Math.random() * 200);
    var y = Math.floor(Math.random() * 200);

    console.log('x, y is ', x, y);

    // how to I get the color here?
    var color = Uint8ClampedArray[x][y];

    console.log('color is ', color);
}

我在该行收到错误：

var color = Uint8ClampedArray[x][y];

所有其他解决方案都涉及每次在坐标上调用getImageData()，宽度和高度为1.但我不想这样做，更喜欢查询imageData来获取颜色....

小提琴是here。

Answer 1

获取像素

var x = 100;
var y = 100;
var imageData = context.getImageData(0, 0, 200, 200);
var index = (x + y * imageData.width) * 4;
var r = imageData.data[index];
var g = imageData.data[index + 1];
var b = imageData.data[index + 2];
var a = imageData.data[index + 3];

每个像素有4个字节，像素按行排列。所以每行有4 *个宽度字节。

因此你找到了行或y

var rowStart = y * imageData.width * 4;

并找到第x列的像素乘以4并添加到起始行索引

var pixelIndex = rowStart + x * 4;

接下来的4个字节是x，y

处像素的红色，绿色，蓝色和alpha值

从canvas.getImageData（）方法返回的数组中获取颜色

1 个答案: