Код реализации Canvas и фильтра

В эпоху распространения цифровых продуктов фотографирование стало неотъемлемой частью жизни. Независимо от того, находитесь ли вы дома, на прогулке или в далеком путешествии, вы всегда сможете сделать красивые фотографии. Но фотографии, сделанные непосредственно камерой, часто имеют определенный разрыв между собой и нашими психологическими ожиданиями. Так как же сократить этот разрыв? Ответ — красивые P-изображения, поэтому появляются всевозможные бьюти-камеры, а P-изображения стали портативным навыком.

На самом деле, так называемая красота — это всего лишь использование множества фильтров, а фильтры используют определенные алгоритмы для манипулирования пикселями изображений для получения особых эффектов изображения. Друзья, которые использовали Photoshop, знают, что в PS есть множество фильтров. Ниже мы будем использовать технологию js Canvas для достижения нескольких эффектов фильтра.

Недавно я узнал изюминки HTML5- canvas . Используя Canvas, сотрудники клиентского отдела могут легко выполнять обработку изображений. Существует множество API. На этот раз я в основном изучу наиболее часто используемые API и напишу следующие два кода:

• Внедрить фильтр обесцвечивания
• Внедрить фильтр негативного цвета (обратного цвета)

Этот элемент HTML предназначен для векторной графики на стороне клиента. Он не имеет собственного поведения, но предоставляет клиентскому JavaScript API рисования, чтобы сценарий мог рисовать на холсте все, что захочет.

Важное различие между тегом <canvas> и SVG и VML заключается в том, что <canvas> имеет API рисования на основе JavaScript, тогда как SVG и VML используют XML-документ для описания рисования.

Большая часть API рисования Canvas не определена в самом элементе <canvas> , а определяется в объекте среды рисования, полученном с помощью метода getContext() холста. Ширина и высота самого элемента <canvas> по умолчанию составляют 300 пикселей и 150 пикселей соответственно.

 // Обрабатываем элемент холста var c = document.querySelector(#my-canvas);c.width = 150;c.height = 70 // Получаем объект контекста по указанному тегу холста var ctx = c.getContext(2d ); ctx.fillStyle = #FF0000 // Цвет ctx.fillRect(0, 0, 150, 75);

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.moveTo(0, 0); //Начальная координата ctx.lineTo(200, 100); //Конечная координата ctx; .stroke(); // Рисуем немедленно

Для интерфейса ctx.arc() пять параметров: (x,y,r,start,stop) . Среди них x и y — координаты центра круга, а r — радиус.

Единицы start и stop — радианы . Не длина, не градусы.

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx. гладить();

 var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.font = 30px Arial;ctx.fillText(Hello World, 10, 50);

Что касается API обработки изображений, то их в основном четыре:

Нарисуйте изображение: drawImage(img,x,y,width,height) или drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Получить данные изображения: getImageData(x,y,width,height)

Перезапишите данные изображения: putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

Экспорт изображения: toDataURL([type, encoderOptions])

Более подробное описание API и параметров см. в разделе: Объяснение параметров API обработки изображений Canvas.

На основе этих API мы можем рисовать изображения в элементе canvas . Предположим, наша картинка ./img/photo.jpg .

 <script> window.onload = function () { var img = new Image() // Объявляем новый объект Image img.src = ./img/photo.jpg // После загрузки изображения img.onload = function () { var Canvas = document.querySelector(#my-canvas); var ctx = Canvas.getContext(2d); // В зависимости от размера изображения укажите размер холста Canvas.width = img.width Canvas.height = img.height // Рисуем изображение ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) } </script>

Как показано на рисунке ниже, картинка нарисована на холсте:

Здесь мы в основном заимствуем функцию getImageData , которая возвращает значение RGBA каждого пикселя. С помощью формул обработки изображений можно манипулировать пикселями для выполнения соответствующих математических операций.

Эффект удаления цвета эквивалентен черно-белым фотографиям, сделанным старыми фотоаппаратами. Исходя из чувствительности человеческого глаза, люди вывели следующую формулу:

gray = red * 0.3 + green * 0.59 + blue * 0.11

Код выглядит следующим образом:

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var Canvas = document.querySelector(#my-canvas); var ctx = Canvas.getContext(2d); Canvas.width = img.width Canvas.height = img.height ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) // Начать обработку фильтра var imgData = ctx.getImageData(0, 0, Canvas.width, Canvas.height); for (var i = 0; i < imgData.data. length / 4; ++i) { var red = imgData.data[i * 4], green = imgData.data[i * 4 + 1], blue = imgData.data[i * 4 + 2]; var grey = 0,3 * red + 0,59 * green + 0,11 * blue; // Вычисляем серый цвет // Обновляем RGB, обратите внимание: // imgData.data[i * 4 + 3] равно хранится альфа, нет необходимости изменять imgData.data[i * 4] = grey; imgData.data[i * 4 + 1] = imgData.data[i *; 4 + 2] = серый; } ctx.putImageData(imgData, 0, 0 // Переписываем данные изображения} </script>

Эффект такой, как показано ниже:

4.2 Негативный цветовой эффект

Отрицательный цветовой эффект заключается в вычитании текущего значения из максимального значения. Теоретическое максимальное числовое значение в RGB, полученное с помощью getImageData, составляет: 255. Итак, формула выглядит следующим образом:

new_val = 255 - val

Код выглядит следующим образом:

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var Canvas = document.querySelector(#my-canvas); var ctx = Canvas.getContext(2d); Canvas.width = img.width Canvas.height = img.height ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) // Начать обработку фильтра var imgData = ctx.getImageData(0, 0, Canvas.width, Canvas.height); for (var i = 0; i < imgData.data. length / 4; ++i) { var red = imgData.data[i * 4], green = imgData.data[i * 4 + 1], blue = imgData.data[i * 4 + 2]; // Обновляем RGB, обратите внимание: // imgData.data[i * 4 + 3] хранит альфу, менять imgData.data[i * 4] = 255 - imgData . данные[i * 4]; imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1]; * 4 + 2] = 255 - imgData.data[i * 4 + 2] } ctx.putImageData(imgData, 0, 0 // Перезаписываем данные изображения} </script>

Визуализации следующие:

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.