Преобразование изображения в массив RGB в Javascript

можно ли получить массив пикселей из изображения PNG или BMP в Javascript? Я хотел бы получить массив RGB из изображения, чтобы я мог манипулировать массивом пикселей, а затем нарисовать измененное изображение на холсте.

обновление: Я нашел здесь точный дубликат: как получить значение RGB изображения на странице с помощью javascript?

однако ответы не вдаются в подробности о том, как на самом деле решить эту проблему проблема.

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] первый пиксель.