HTML canvas createImageData() Method

пример

Создание 100*100 пикселей ImageData объект , где каждый пиксель красного цвета, и положил его на холст:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);

Попробуй сам "

Поддержка браузеров

Числа в таблице указать первую версию браузера, который полностью поддерживает метод.

метод
createImageData()	да	9.0	да	да	да

Определение и использование

createImageData() метод создает новый пустой объект ImageData. пиксельные значения нового объекта являются прозрачный черный по умолчанию.

Для каждого пиксела в объекте ImageData есть четыре части информации, значения RGBA:

R - Красный цвет (0-255)
G - Зеленый цвет (0-255)
B - цвет синий (0-255)
- Альфа - канал (0-255; 0 является прозрачным и 255 полностью виден)

Так, прозрачный черный указывает: (0,0,0,0) .

Информация о цвете / альфа удерживается в массиве, а так как массив содержит 4 части информации для каждого пикселя, размер массива в 4 раза размер объекта ImageData: ширина * высота * 4. (Простой способ найти размер массива, заключается в использовании ImageDataObject.data.length)

Массив , содержащий информацию о цвет / альфа хранится в data свойства объекта ImageData.

Совет: После того, как вы манипулировали информацию цвет / альфа в массиве, вы можете скопировать данные изображения обратно на холст с putImageData() метод.

Примеры:

Синтаксис для создания первого пикселя в ImageData объект красный:

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

Синтаксис для создания второго пикселя в объекте ImageData зеленый:

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

JavaScript Синтаксис

Есть две версии createImageData() метод:

1. Это создает новый объект ImageData с заданными размерами (в пикселях):

Синтаксис JavaScript:	var imgData=context.createImageData(width,height);

2. Это создает новый объект ImageData с теми же размерами, как объекта, указанного anotherImageData (это не копирует данные изображения):

JavaScript syntax:	var imgData=context.createImageData(imageData);

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

параметр	Описание
width	Ширина нового объекта ImageData в пикселях
height	Высота нового объекта ImageData в пикселях
imageData	объект anotherImageData

<HTML Canvas Ссылка