Обработка пикселей на Canvas в HTML5

Usage of the createImageData() function for HTML5 Canvas pixel processing, online instance demonstration of canvas pixel processing, how to define the syntax and its detailed attributes, etc.

Can access each pixel of the HTML5 canvas. You can use the ImageData object to perform this operation. The ImageData object contains a pixel array. By accessing this array, you can manipulate pixels. After completing pixel operations, you need to copy the pixels to the canvas to display them.

Создание объекта ImageData

Создание объекта ImageData выполняется с помощью функции createImageData() в 2D контексте. Вот пример:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
var width = 100;
var height = 100;
var imageData = context.createImageData(width, height);

Атрибуты width и height функции createImageData() устанавливают ширину и высоту области пикселей, которую представляет объект ImageData, созданный с помощью функции createImageData(). В примере выше был создан объект ImageData с площадью 100 x 100 пикселей.

Атрибуты ImageData

Объект ImageData имеет три атрибута:

• width

• height

• data

Атрибуты width и height содержат ширину и высоту области графических данных.
Атрибут data — это массив байт, содержащий значения пикселей.

Обработка пикселей

　Каждый пиксель в массиве data содержит значение из 4 байт. Красный, зеленый и синий цвета представляют собой одно значение, а канал alpha — другое. Цвет пикселя определяется путем смешивания красного, зеленого и синего цветов для создания конечного цвета. Канал alpha объясняет прозрачность пикселя. Каждый из значений красного, зеленого, синего и alpha может принимать значения от 0 до 255.
Это пример кода для установки цвета и значения Alpha первого пикселя:

var pixelIndex = 0;
imageData.data[pixelIndex] = 255; // красный цвет
imageData.data[pixelIndex + 1] = 0; // зеленый цвет
imageData.data[pixelIndex + 2] = 0; // синий цвет
imageData.data[pixelIndex + 3] = 255;

Используйте следующий код для чтения значений пикселей:

var pixelIndex = 0;
var red = imageData.data[pixelIndex]; // красный цвет
var green = imageData.data[pixelIndex + 1]; // зеленый цвет
var blue = imageData.data[pixelIndex + 2]; // цвет blue
var alpha = imageData.data[pixelIndex + 3];

Чтобы получить значение pixelIndex следующего пикселя, увеличьте его значение на 4 (каждый пиксель состоит из 4 элементов массива, как показано выше).
Вы можете таким образом вычислить индекс данного пикселя:

　var index = 4 * (x + y * width);

x и y в вычислениях представляют собой индекс, вычисленный по координатам x и y пикселя. Пиксели в массиве data организованы в последовательность длинных пикселей, начинающуюся с верхнего левого пикселя, движущуюся вертикально вправо. При достижении конца строки последовательность пикселей продолжается с самого левого пикселя следующей строки. Поэтому для вычисления индекса пикселя, находящегося в позиции x, нужно умножить координату y на количество пикселей в строке и добавить значение x.
Это изображение объясняет массив пикселей imageData шириной 20 пикселей и высотой 8 пикселей. В правом отступе перечислены индексы каждого ряда пикселей. Как вы видите, индексация начинается от верхнего левого угла 0 и увеличивается вправо. При достижении края строки индексация продолжается с самого левого пикселя нижней строки и продолжается вправо.

Копирование пикселей на холст

После обработки пикселей можно использовать функции 2D контекста, чтобы скопировать их на холст с помощью putImageData(). Функция putImageData() имеет две версии putImageFunction(). Первая версия функции putImageData() копирует все пиксели на холст. Вот пример:

var canvasX = 25;
var canvasY = 25;
context.putImageData(imageData, canvasX, canvasY);

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

var canvasX = 25;
var canvasY = 25;
var sx = 0;
var sy = 0;
var sWidth = 25;
var sHeight = 25;
context.putImageData(imageData, canvasX, canvasY, sx, sy, sWidth, sHeight);

Параметры sx и sy (sourceX и sourceY) — это координаты x и y верхнего левого угла прямоугольника, копируемого из массива пикселей.
Параметры sWidth и sHeight (sourceWidth и sourceHeight) — это ширина и высота прямоугольника, копируемого из массива пикселей.

Получение пикселей из канваса

Можно также захватить прямоугольник пикселей с канваса в объект ImageData. Это делается с помощью функции getImageData(). Вот пример:

var x = 25;
var y = 25;
var width = 100;
var height = 100;
var imageData2 = context.getImageData(x, y, width, height);

Параметры x и y берутся из координат верхнего левого угла прямоугольника канваса.
Параметры width и height берутся из ширины и высоты прямоугольника канваса.