html5-canvas
Пиксельное манипулирование с помощью «getImageData» и «putImageData»

Введение в "context.getImageData"

Html5 Canvas дает вам возможность извлекать и изменять цвет любого пикселя на холсте.

Вы можете использовать манипуляции с Canvas для:

• Создайте подборку цветов для изображения или выберите цвет на цветовом колесе.
• Создавайте сложные фильтры изображений, такие как размытие и обнаружение краев.
• Перекрасьте любую часть изображения на уровне пикселей (если вы используете HSL, вы можете даже перекрасить изображение, сохраняя при этом важное освещение и насыщенность, чтобы результат не выглядел так, как будто кто-то ударил краской на изображении). Примечание. В холсте теперь есть Blend Compositing, который также может перекрасить изображение в некоторых случаях.
• «Нокаут» фон вокруг человека / предмета в изображении,
• Создайте инструмент рисования с красками для обнаружения и частичной заливки изображения (например, измените цвет лепестка цветка с зеленого на желтый).
• Изучите изображение для контента (например, распознавание лица).

Общие вопросы:

• По соображениям безопасности getImageData отключается, если вы нарисовали изображение, происходящее из другого домена, чем сама веб-страница.
• getImageData - относительно дорогостоящий метод, потому что он создает массив больших пикселей и потому, что он не использует графический процессор, чтобы помочь его усилиям. Примечание. В холсте теперь есть композиция смешивания, которая может выполнять некоторые из тех же манипуляций с пикселями, что и getImageData .
• Для изображений .png getImageData может не сообщать о тех же цветах, что и в исходном .png-файле, поскольку браузеру разрешено выполнять гамма-коррекцию и альфа-премультипликацию при рисовании изображений на холсте.

Получение цветов пикселей

Используйте getImageData для получения цветов пикселей для всего содержимого или его части.

Метод getImageData возвращает объект imageData

Объект imageData имеет свойство .data которое содержит информацию о цвете пикселей.

Свойством data является Uint8ClampedArray содержащий data Uint8ClampedArray Red, Green, Blue & Alpha (непрозрачность) для всех запрошенных пикселей.

// determine which pixels to fetch (this fetches all pixels on the canvas)
var x=0;
var y=0;
var width=canvas.width;
var height=canvas.height;

// Fetch the imageData object 
var imageData = context.getImageData(x,y,width,height);

// Pull the pixel color data array from the imageData object
var pixelDataArray = imageData.data;

Вы можете получить положение любого пикселя [x, y] в массиве data следующим образом:

// the data[] array position for pixel [x,y]
var n = y * canvas.width + x;

И тогда вы можете получить такие значения красного, зеленого, синего и альфа пикселя, как это:

// the RGBA info for pixel [x,y]
var red=data[n];
var green=data[n+1];
var blue=data[n+2];
var alpha=data[n+3];

Иллюстрация, показывающая, как структурирован массив данных пикселей

context.getImageData проиллюстрировано ниже для небольшого холста размером 2 × 3 пикселя: