Метод HTML canvas getImageData()

Руководство HTML5 Canvas

Определение и использование

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

Для каждого пикселя объекта ImageData существует четыре вида информации, то есть значения RGBA:

  • R - красный (0-255)
  • G - зеленый (0-255)
  • B - синий (0-255)
  • A - канал alpha (0-255; 0 - прозрачный, 255 - полностью видимый)

Цвет/alpha существует в виде массива и хранится в объекте ImageData в data свойство.

Совет:После выполнения операций с цветом/alpha информации в массиве, вы можете использовать putImageData() Метод копирует данные изображения обратно на канвас.

Пример:

Ниже приведен код, который позволяет получить информацию о цвете/alpha первого пикселя объекта 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);
}

Попробуйте сами

Совет:Более примеров предоставлено в нижней части страницы.

Синтаксис

var imgData=context.getImageData(x,y,width,height);

Значение параметра

Параметр Описание
x X координата верхнего левого угла начала копирования.
y Y координата верхнего левого угла начала копирования.
width Ширина копируемого прямоугольной области.
height Высота копируемого прямоугольной области.

Более примеров

Пример 2

Используемая изображение:

Тюльпан

Используйте getImageData() для инверсии цвета каждого пикселя на экране.

Ваш браузер не поддерживает тег HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
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);

Попробуйте сами

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Комментарий:Интернет-Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

Руководство HTML5 Canvas