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