Javascript 查找画布补丁的rgb值

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

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

现在在数据中，我有很多胡说八道的东西，我不知道它们到底是什么，因为我有1600个项目的数组？不知道这是怎么回事

---

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

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+3

，其中W是图像数据的宽度（在您的例子中为20）