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

Question

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

更新：我在这里找到了一个完全相同的副本：如何使用 javascript 在页面中获取图像的 RGB 值？

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

Answer 1

网上有一百个关于使用 HTML Canvas imageData的教程，它获取画布的 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]。