HTML холст getImageData() Метод
Пример
Приведенный ниже код копирует пиксельные данные для заданного прямоугольника на холсте с 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);
}
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает этот метод.
| Метод | |||||
|---|---|---|---|---|---|
| getImageData() | Да | 9.0 | Да | Да | Да |
Определение и использование
Метод getImageData() возвращает объект ImageData, который копирует пиксельные данные для заданного прямоугольника на холсте.
Примечание: Объект ImageData не является рисунком, он определяет часть (прямоугольник) на холсте и хранит информацию о каждом пикселе внутри этого прямоугольника.
Для каждого пикселя в объекте ImageData есть четыре части информации, RGBA значения:
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;
Ниже приведен пример
Синтаксис JavaScript
| Синтаксис JavaScript: | context.getImageData(x,y,width,height); |
|---|
Другие Примеры
Изображение для использования:
Пример
Используйте 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
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);
❮ HTML Справка на полотно