Перейти к содержанию

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

Синтаксис

context.getImageData(x, y, width, height);

Значения

x
Координата X (в пикселях) верхнего левого угла копируемой области
y
Координата Y (в пикселях) верхнего левого угла копируемой области
width
Ширина копируемой области
height
Высота копируемой области

Спецификация

Примеры

Пример 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(), чтобы инвертировать цвет каждого пикселя изображения на холсте:

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

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)

Ссылки