javascript - 在 Javascript 中将图像转换为 RGB 数组

Question

是否可以在 Javascript 中从 PNG 或 BMP 图像中获取像素数组？我想从图像中获取 RGB 数组，以便我可以操作像素数组，然后在 Canvas 上绘制修改后的图像。

更新:我在这里找到了一个完全相同的副本:how to get the RGB value of an image in a page using javascript?

但是，答案并没有详细说明如何实际解决这个问题。

Answer 1

网上有一百个关于使用 HTML Canvas 的教程 imageData , 它获取 Canvas 的 RGBA 值。搜索 canvas imageData，您会找到大量信息。

您所要做的就是:

ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(x, y, width, height).data;

imgData 现在是一个数组，其中每 4 个位置是每个像素。所以 [0][1][2][3] 是第一个像素的 [r][g][b][a]。