HTML-холст getImageData метод ()
HTML холст Справочное руководство
примеров
Следующие getImageData код () Скопировать на холсте, бумаге прямоугольник обозначается пиксельных данных, и () данные изображения обратно в полотно putImageData:
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);
}
Попробуйте »
Поддержка браузеров
Internet Explorer 9, Firefox, Opera, Chrome и Safari поддержка getImageData () метод.
Примечание: 8 и более ранние версии Explorer , это интернет не поддерживает элемент <Canvas>.
Определение и использование
Метод getImageData () возвращает объект ImageData, который является копией указанных данных пикселя прямоугольный холст.
Примечание: объект ImageDataне изображение, которое обеспечивает часть холста (прямоугольника), и сохраняется в пределах прямоугольника информации каждого пикселя.
ImageData объект для каждого пикселя, есть четыре области информации, а именно значения RGBA:
R - красный (0-255)
G - зеленый (0-255)
B - синий (0-255)
А - альфа-канал (0-255; 0 является прозрачным, 255 полностью виден)
цвет / альфа информацию в виде массива и сохранения в объекте ImageData данных свойств.
Совет: Полный массив цвет / альфа - информации в операции, вы можете использовать putImageData () метод данных изображения копируется обратно на холст.
Пример:
Следующий код может быть получен объект ImageData возвращается в цвет / альфа информацию первого пиксела:
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Совет: Вы можете также использовать метод getImageData () , чтобы изменить цвет каждого пикселя изображения на холсте.
Используйте эту формулу через все пиксели, и изменить его цветовые значения:
green=255-old_green;
blue=255-old_blue;
Посмотрите на следующий экземпляр "попробовать"!
синтаксис JavaScript
| Синтаксис JavaScript: | Контекст .getImageData (х, у, ширина, высота); |
|---|
Параметр Значение
| 参数 | 描述 |
|---|---|
| x | 开始复制的左上角位置的 x 坐标（以像素计）。 |
| y | 开始复制的左上角位置的 y 坐标（以像素计）。 |
| width | 要复制的矩形区域的宽度。 |
| height | 要复制的矩形区域的高度。 |
Другие примеры
Изображение, которое вы хотите использовать:
примеров
Используйте getImageData (), чтобы изменить цвет каждого пикселя изображения на холсте:
JavaScript:
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 холст Справочное руководство