174 • Глава 5
Представленный выше код — это простой пример динамического создания изображения
налету. Как только оно загружается, я могу вывести его часть на холст. Как вы узнаете
через мгновение, есть несколько способов применения метода drawImage; здесь я вырезал
квадрат со стороной 10 пикселов, увеличил его до квадрата со стороной 100 пикселов и рас-
тянул на квадратный холст со стороной 500 пикселов.
Захват изображения из элемента <
video>
предлагает несколько интересных возможностей.
В сети есть множество демонстрационных проектов, включая динамическую вставку содер-
жимого в видео, замену зеленого фона и распознавание лиц — все это делается с помощью
холста и видео и программируется на знакомом JavaScript.
Захват и рисование происходят в методе
drawImage
, которому требуется ссылка на источ-
ник (изображение, видео или холст), целевые координаты (координаты точки, обознача-
ющей верхний левый угол изображения, которое будет нарисовано на холсте) и несколько
вспомогательных аргументов для обрезки и масштабирования изображения:
drawImage(image,
dx,
dy)
drawImage(image,
dx,
dy,
dw,
dh)
drawImage(image,
sx,
sy,
sw,
sh,
dx,
dy,
dw,
dh)
Здесь координаты, начинающиеся с
d
, — это координаты итогового изображения,
а
s
-координаты обозначают положение источника. Например, я хочу взять синергети-
ческие видео Брюса из четвертой главы и соорудить наверху своей веб-страницы ленту
из картинок, на которых Брюс колотит банан. Для этого мне понадобится кадрировать
и масштабировать видео с помощью метода
drawImage
.
Вот какие компоненты мне потребуются:
холст, размещенный наверху страницы;
скрытый элемент
