ПРИМЕЧАНИЕ Для того чтобы в методе
drawImage использовалось другое изображение, оно должно пере-
даваться по протоколу http (а не указываться как файл в локальной системе)
Переменная
pixels
относится к типу
CanvasPixelArray
и включает свойства
height
,
width
и
data
. Свойство
data
представляет собой массив данных пикселов, составленный
следующим образом:
[ r1, g1, b1, a1, r2, g2, b2, a2, r3, g3, b3, a3, ... ]
Здесь
r1
,
g1
,
b1
,
a1
составляют первый пиксел,
r2
,
g2
,
b2
,
a2
— второй и т. д.
data.length
—
это число пикселов, захваченных с помощью
getImageData
(в предыдущем примере оно
равно числу пикселов изображения), умноженное на 4, так как для описания каждого
пиксела используется 4 канала. Обратите внимание, что в
CanvasPixelArray
пикселы вы-
деленной области перечислены от верхнего левого угла к нижнему правому построчно.
Имея доступ к подобным данным, изображения можно обрабатывать на уровне пикселов.
Например, создавать пользовательские фильтры для приложений, таких как графические
редакторы, показанные на рис. 5.2, или сканировать изображения с целью поиска опреде-
ленных цветовых диапазонов. Можно даже написать веб-приложение для распознавания
лиц на фотографиях.
Пол Руже и Тристан Нито из Mozilla в начале 2009 года продемонстрировали приложение
(рис. 5.16), позволяющее вставлять в видеофрагмент (элемент
