178 • Глава 5
го элемента. На рис. 5.16 вы видите, как один элемент холста динамически вставляется
в другой. Поиграть с этим приложением можно на веб-сайте по адресу
http://people mozilla
com/~prouget/demos/DynamicContentInjection/play xhtml
.
Рис . 5 .16 .
Сканирование видео в поисках яркого пятна, поверх которого вставляется
динамическое содержимое
В следующем примере кода я загружаю на холст изображение и инвертирую все пикселы,
создавая курьезную рентгеновскую версию нашей с Брюсом фотографии (рис. 5.17):
var ctx = document.querySelector('canvas').
¬ getContext('2d'),
img = document.createElement('img');
// нужно дождаться, пока изображение загрузится
img.onload = function () {
ctx.canvas.width = img.width;
ctx.canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var pixels = ctx.getImageData(0, 0, img.width,
¬ img.height);
for (var i = 0, n = pixels.data.length; i < n; i += 4) {
pixels.data[i+0] = 255 - pixels.data[i+0]; // красный
pixels.data[i+1] = 255 - pixels.data[i+2]; // зеленый
pixels.data[i+2] = 255 - pixels.data[i+1]; // синий
// i + 3 — это альфа-канал, который нам не нужен
}
ctx.putImageData(pixels, 0, 0);
};
mg.src = 'authors.jpg';
Холст • 179
Рис . 5 .17 .
Если бы вы загнали Брюса и Реми в рентгеновский аппарат, то на выходе получили бы
такую странную картинку
Что происходит в этом листинге: я дожидаюсь, пока изображение полностью загрузится,
а затем копирую его на холст. После того как изображение выводится на холст, я сразу
же считываю данные пикселов, чтобы применить к ним нужную корректировку (ин-
версию).
В цикле
for
я использую выражение
i
+=
4
, чтобы пройти по всем пикселам, но не по каж-
дому каналу каждого пиксела. Присваивая битам цветовых каналов значение (255 – текущее
значение), я получаю инвертированные цвета.
Наконец, выполнив корректировку, я вывожу содержимое переменной
pixels
на холст
с помощью метода
putImageData
. Для этого я передаю методу объект
CanvasPixelArray
и координаты
x
и
y
начальной точки.
ПРИМЕЧАНИЕ
У элемента
|