Шрифт:
21.4.14. Манипулирование пикселами
Метод
getlmageData
возвращает объект ImageData
, представляющий массив пикселов (в виде компонентов R, G, В и А) из прямоугольной области холста. Создать пустой объект ImageData
можно с помощью метода createImageData
. Пикселы в объекте ImageData
доступны для записи, благодаря чему их можно изменить как угодно и затем скопировать обратно в холст вызовом метода putlmageData.
Эти методы манипулирования пикселами предоставляют низкоуровневый доступ к холсту. Координаты и размеры области, передаваемой методу
getlmageData,
задаются в системе координат по умолчанию: ее размеры измеряются в CSS-пикселах и без учета текущего преобразования. При вызове метода putlmageData
координаты также задаются в системе координат по умолчанию. Кроме того, метод putImageData
игнорирует все графические атрибуты. Он не использует механизм композиции, не умножает пикселы на значение свойства globalAlpha
и не рисует тени. Методы манипулирования пикселами могут пригодиться для реализации обработки изображений. Пример 21.10 демонстрирует, как создать простейший эффект размытия или «смазывания» быстро движущегося объекта в элементе
<canvas>~
Пример демонстрирует применение методов getlmageData
и putlmageData
и показывает, как выполнять итерации по пикселам в объекте ImageData
и изменять их значения, но без подробного описания. Полная информация о методах getlmageData
и putlmageData
приводится в справочной статье CanvasRenderingContext2D
, а подробное описание объекта ImageData
– в его собственной справочной статье. Пример 21.10. Создание эффекта размытия быстродвижущегося объекта с помощью объекта ImageData
// "Смазать" пикселы прямоугольной области вправо, чтобы воспроизвести эффект быстрого
// движения объекта справа налево. Значение п должно быть равно или больше 2. Нем больше
// значение, тем сильнее эффект смазывания. Координаты и размеры прямоугольной области
// задаются в системе координат по умолчанию,
function smear(c, п, х, у, w, h) {
// Получить объект ImageData, представляющий пикселы области эффекта
var pixels = c.getImageData(x,у,w,h);
// Смазывание выполняется на месте, и потому требуется получить только
// исходный объект ImageData. Некоторые алгоритмы обработки изображений требуют
// использования дополнительного объекта ImageData для сохранения трансформированных
// значений пикселов. Если бы потребовался промежуточный буфер вывода, можно было бы
// создать новый объект ImageData с теми же размерами следующим способом:
// var output_pixels = с.createlmageData(pixels):
// Эти размеры могут отличаться от значений аргументов w и h: на каждый
// CSS-пиксел может приходиться несколько аппаратных пикселов,
var width = pixels.width,
height = pixels.height:
// Это массив байтов, хранящий информацию о пикселах, слева направо и сверху вниз.
// Для каждого пиксела отводится 4 последовательных байта, в порядке R,G,В,А.
var data = pixels.data;
// Смазать каждый пиксел после первого в каждой строке, заменив его суммой
// 1/n-й доли его собственного значения и m/n-й доли значения предыдущего пиксела
var m = n-1;
for(var row = 0; row < height: row++) { // Для каждой строки
var і = row*width*4 +4; // Индекс второго пиксела в строке