javascript - 查找一块画布的 rgb 值

Question

所以我有我的画布，我从中获取一些图像数据，如下所示：

// assume canvas already has an image on it
var data = ctx.getImageData(0, 0, 20, 20);

现在在数据中我有很多废话，我不知道它到底是什么，因为我有一个包含 1600 个项目的数组？不知道那是怎么回事..

我想获得整个 20x20 块的平均 RGB 值。我什至如何从图像数据中获取它？

Answer 1

getImageData返回一个具有data属性的对象。该属性是一个值数组，这就是您所看到的。

基本上，它是这样构建的：

[
    pixel (0,0) red, pixel (0,0) green, pixel (0,0) blue, pixel (0,0) alpha,
    pixel (1,0) red, pixel (1,0) green, pixel (1,0) blue, pixel (1,0) alpha
    ......
]

等等。

因此，要获取像素 (X,Y) 的颜色，您需要获取(Y*W+X)*4红色、(Y*W+X)*4+1绿色、(Y*W+X)*4+2蓝色和(Y*W+X)*4+3alpha 的值，其中 W 是图像数据的宽度（在您的情况下， 20)