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()
, чтобы инвертировать цвет каждого пикселя изображения на холсте:
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)
Ссылки¶
- Метод
getImageData()
MDN (рус.)