在Javascript中将图像转换为RGB阵列 [英] Convert an image to an RGB array in Javascript

问题描述

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

Is it possible to get an array of pixels from a PNG or BMP image in Javascript? I'd like to obtain an RGB array from an image so that I can manipulate the array of pixels, and then draw the modified image on a canvas.

UPDATE：我在这里发现了一个完全重复的：如何使用javascript获取页面中图片的RGB值？

UPDATE: I found an exact duplicate here: how to get the RGB value of an image in a page using javascript?

但是，答案不会

推荐答案

在网上有关于使用HTML Canvas的一百个教程

There are a hundred tutorials on the net about using HTML Canvas imageData, which gets the RGBA values of an canvas. Do a search for canvas imageData and you'll find plenty of info.

所有你需要做的是：

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

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

imgData is now an array where every 4 places are each pixel. So [0][1][2][3] are the [r][g][b][a] of the first pixel.

这篇关于在Javascript中将图像转换为RGB阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！