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

Question

是否可以在Javascript中从PNG或BMP图像中获取像素数组？我想从图像中获取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]第一像素.

“img”的参数类型应该是什么？它应该是一个图像对象，还是应该是一个字符串形式的图像 URL？ (2认同)
@AndersonGreen Image 对象的实例，您可以通过任一 DOM 获取它，通过以下方式创建一个新的： `var img = new Image(); img.src = "http://..." 或 img.src = "data:image/jpeg;base64,...."` (2认同)