Javascript метод getImageData()

Метод getImageData() возвращает объект ImageData, который копирует пиксельные данные заданной прямоугольной области холста.

Примечание: Объект ImageData это не изображение. Он представляет часть (прямоугольную область) холста и содержит информацию о каждом пикселе данной прямоугольной области.

R - Красный цвет (0-255)
G - Зеленый цвет (0-255)
B - Синий цвет (0-255)
A - Альфа-канал (0-255; 0 - прозрачный, 255 - полностью видимый)

Информация о цвете/прозрачности храниться в массиве в свойстве data объекта ImageData.

После манипулирования с этими данными их можно скопировать обратно на холст при помощи метода putImageData().

Пример:

Получить цветовую информацию по первому пикселю объекта ImageData можно при помощи следующего кода:

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

Примечание: При помощи метода getImageData() можно инвертировать цвет каждого пикселя изображения на холсте. Для этого нужно в цикле изменить цвет всех пикселей, используя следующую формулу:

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

Значения параметров

Пример использования

Пример №1

Следующий код копирует пиксельные данные определенной прямоугольной области на холсте при помощи метода getImageData(), а затем возвращает их обратно при помощи метода putImageData():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

function copy()
 {
 var imgData=ctx.getImageData(10,10,50,50);
 ctx.putImageData(imgData,10,70);
}

Изображение для примера:

Пример №2

Используем метод getImageData(), чтобы инвертировать цвет каждого пикселя изображения на холсте:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
 
// инвертироват цвета
for (var i=0; i<imgData.data.length; i+=4)
 {
   imgData.data[i]=255-imgData.data[i];
   imgData.data[i+1]=255-imgData.data[i+1];
   imgData.data[i+2]=255-imgData.data[i+2];
   imgData.data[i+3]=255;
 }

ctx.putImageData(imgData,0,0);