Метод getImageData() холста HTML
Пример
Приведенный ниже код копирует данные пикселей для указанного прямоугольника на холсте с помощью 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);
}
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | Yes | 9.0 | Yes | Yes | Yes |
Определение и использование
Метод getImageData() возвращает объект ImageData, который копирует данные пикселей для указанного прямоугольника на холсте.
Примечание. Объект ImageData не является изображением, он указывает часть (прямоугольник) на холсте и содержит информацию о каждом пикселе внутри этого прямоугольника.
Для каждого пикселя в объекте ImageData есть четыре части информации, значения RGBA:
R — красный цвет (от 0 до 255)
G — зеленый цвет (от 0 до 255)
B — синий цвет (от 0 до 255)
A — альфа-канал (от 0 до 255; 0 — прозрачный, 255 — полностью видно)
Информация о цвете/альфа-канале содержится в массиве и сохраняется в свойстве данных объекта 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;
Ниже приведен пример «Попробуйте сами»!
Синтаксис JavaScript
| Синтаксис JavaScript: | контекст .getImageData( x,y,ширина,высота ); |
|---|
Значения параметров
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
Дополнительные примеры
Изображение для использования:
Пример
Используйте 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);
// invert colors
var i;
for (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);
❮ Справочник по холсту HTML