HTML canvas getImageData()— метод

HTML canvas 参考手册 Справочник по HTML canvas

Примеры

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

const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 50, 50); function copy() { const imgData = ctx.getImageData(10, 10, 50, 50); ctx.putImageData(imgData, 10, 70); }

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

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

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают метод getImageData().

Примечание:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

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

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

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

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

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

Информация о цвете/альфа-канале существует в виде массива и хранится вdata-свойстве объекта ImageData.

Совет:После того как вы закончите обрабатывать информацию о цвете/альфа-канале в массиве, вы можете использовать методputImageData(), чтобы скопировать данные изображения обратно на canvas.

Пример:

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

См. пример "Попробуйте сами" ниже!

Синтаксис JavaScript

Синтаксис JavaScript:	context.getImageData(x,y,width,height);

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

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

Другие примеры

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

The Scream

Пример

Используйте 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);