Вопрос по javascript, canvas – Преобразовать изображение в массив RGB в Javascript

10

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

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

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

Если вы нажмете на ссылку ответа на этот вопрос, вы получите подробный ответ о том, как инвертировать цвет каждого пикселя в изображении. Преобразование этого кода в хранение массива пикселей должно быть тривиальным. JaredMcAteer
Увидетьdeveloper.mozilla.org/en/Canvas_tutorial Rob W
возможный дубликатhow to get the RGB value of an image in a page using javascript? John Carter

Ваш Ответ

1   ответ
8

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] первого пикселя.

Error: User Rate Limit Exceeded Anderson Green
Error: User Rate Limit Exceededvar img = new Image(); img.src = "http://..." or img.src = "data:image/jpeg;base64,...."
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы