Можностей, предоставляемых веб-разработчикам



Pdf көрінісі
бет203/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   199   200   201   202   203   204   205   206   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

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
 начальной точки.
ПРИМЕЧАНИЕ
У элемента 
 есть обеспечивающий безопасность внутренний флаг соответствия ис-
точников, который по умолчанию равен 
true  Значение этого флага меняется на false, если 
на холст выводится изображение или видео, источник которого не совпадает с источником 
документа-владельца холста  То же самое относится к использованию в качестве источника 
изображения другого холста, у которого флаг соответствия источников уже равен 
false  Если 
значение флага равно 
false, то применить метод getImageData или toDataURL невозможно, 
даже если изменить размер холста или нарисовать что-нибудь на нем после того, как флагу 
было присвоено значение 
false 




Достарыңызбен бөлісу:
1   ...   199   200   201   202   203   204   205   206   ...   232




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет