Изучаем HTML 5-Б. Лоусон, Р. Шарп - 2011

-I pixels .data [i+2] ; // зеленый

pixels.data[i+2] =

-i 255 pixels . data [i+1 ] ; // синий

// i + 3 — это альфа-канал, который нам

-| не нужен

}

ctx.putlmageData(pixels, 0, 0);

};

img.src = 'authors.jpg'

Рис. 5.17. Если бы вы загнали Брюса и Реми в рентгеновский аппарат, то на выходе получили бы такую странную картинку

Что происходит в этом листинге:я дожидаюсь, пока изображение полностью загрузится, а затем копирую его на холст. После того как изображение выводится на холст, я сразу же считываю данные пикселов, чтобы применить к ним нужную корректировку.

В цикле for я использую выражение i += 4, чтобы пройти по всем пикселам, но не по каждому каналу каждого пиксела. Присваивая битам цветовых каналов значение (255 - текущее значение), я получаю инвертированные цвета.

Наконец, выполнив корректировку, я вывожу содержимое переменной pixels на холст с помощью MeTOflaputimageData. Для этого я передаю методу объект Canvas PixelAr ray и координаты х и у начальной точки.