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

Question

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

更新：我在此处找到了完全相同的内容：how to get the RGB value of an image in a page using javascript?

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

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]。