Метод Canvas getImageData()

Руководство по 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

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

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