Можностей, предоставляемых веб-разработчикам
жүктеу/скачать 5,47 Mb. Pdf көрінісі
|
- Бұл бет үшін навигация:
- Рис . 5 .16 .
- • 179 Рис . 5 .17 .
| 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 начальной точки. ПРИМЕЧАНИЕ У элемента |