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