Canvas — действительно волшебная вещь. Он может не только рисовать различную графику, текст и растровые изображения, но и выполнять сложные пиксельные операции и обработку растровых изображений. Таким образом, такие вещи, как фильтры, можно реализовать с помощью Canvas. Далее пришло время стать свидетелем чуда.
Во-первых, нам нужен контейнер Canvas, например:
<canvas id=myCanvas width=800 height=800></canvas>
Далее нам нужно использовать Canvas, чтобы нарисовать картинку:
var myCanvas = document.getElementById(myCanvas);var ctx = myCanvas.getContext(2d);var img = new Image();img.src = ./images/1526010092000.jpg;// Подготовьте собственную ссылку на изображение img.onload = (e) => {ctx.drawImage(img, 0, 0, 800, 800);//Первый 800 представляет ширину нарисованного изображения, а второй 800 представляет высоту нарисованного изображения}Эффект первого рисунка Canvas
Следующий шаг — выполнить некоторые операции над пикселями изображения. Чтобы реализовать такую операцию, вам сначала необходимо получить информацию о пикселях изображения из Canvas, и получить эту информацию можно с помощью getImageData() .
// ... Опустить предыдущий код img.onload = (e) => {// ... Опустить предыдущий код img = ctx.getImageData(0, 0, 800, 800 // Получаем цвет каждого); данные пиксельного байта}Так как размер картинки 800*800, то необходимо пройтись по пикселям, чтобы получить значения красного, зеленого и синего каждого пикселя. поэтому:
// ... Опустить предыдущий код img.onload = (e) => {// ... Опустить предыдущий код var PixelLen = 800 * 800; // Получить количество пикселей for(var i = 0; i < PixelLen * 4; i += 4) { var redC = img.data[i], // Первая единица байта представляет красный цвет greenC = img.data[i + 1], // Вторая единица байта представляет зеленый цвет blueC = img.data[i + 2], // Третий байт представляет синюю альфу = img.data[i + 3] // Четвертый байт представляет прозрачность}};С помощью приведенного выше цикла мы получаем конкретное значение цвета каждого пикселя, содержащегося в данных изображения; следует отметить, что данные каждого пикселя представляют собой не один бит, а четыре соседних бита, которые соответственно представляют красный, зеленый и синий, и значения прозрачности точки. Поэтому фактически длина массива байтовых данных растрового изображения равна количеству пикселей, умноженному на 4. В цикле for мы также соответствующим образом обращаемся с этой особенностью.
Усредняя значения красного, зеленого и синего каждой точки, а затем присваивая сгенерированное среднее значение значениям красного, зеленого и синего пикселя, можно сформировать эффект оттенков серого. Наконец, putImageData() используется для повторного рисования изображения, код следующий:
// ... Опустить предыдущий код img.onload = (e) => { // ... Опустить предыдущий код for(var i = 0; i < PixelLen * 4; i += 4) { // . .. Опустите предыдущий код var Gray = parseInt((redC + greenC + blueC) / 3 // Получите значение серого после усреднения img.data[i] = Gray // Измените значение красного img.data[i); + 1] = Gray; // Изменяем значение зеленого img.data[i + 2] = Gray; // Изменяем значение синего} ctx.putImageData(img, 0, 0, 800, 800 // Перерисовываем изображение}В это время будет сформирован эффект оттенков серого, как показано ниже.
Canvas рисует изображение во второй раз — эффект оттенков серого
Чтобы управлять прозрачностью, вам нужно всего лишь изменить значение, соответствующее четвертому байту. Диапазон значений: 0–256, 0 представляет полную прозрачность, а 256 представляет полную непрозрачность. Например:
// ... Опустить предыдущий код img.onload = (e) => { // ... Опустить предыдущий код for(var i = 0; i < PixelLen * 4; i += 4) { // . .. Опустить предыдущий код img.data[i + 3] = 128 // Прозрачность 50% } // ... Опустить предыдущий код };Эффект третьего рисунка холста — увеличение прозрачности
Отсюда, управляя значением 4-х данных для каждого пикселя изображения, можно добиться эффекта фильтра. Не правда ли, так просто!
Ссылки:
«Базовые знания HTML5, основные технологии и передовые примеры» под редакцией Лю Хуаня
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.