Последние учебники веб-разработки
 

HTML canvas getImageData() Method

<HTML Canvas Ссылка

пример

Приведенный ниже код копирует данные пикселя для указанного прямоугольника на холсте с 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)
- Альфа - канал (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);

Значения параметров

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

Еще примеры

Изображение использовать:

Крик

пример

Используйте getImageData() , чтобы инвертировать цвет каждого пикселя изображения на холсте:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 Canvas Ссылка