Как добавить фильтры изображений (фотоэффекты) к изображениям в браузере с помощью JavaScript с помощью Lena.js

Фильтрация изображений позволяет применять различные эффекты к фотографиям. Хотя JavaScript не подходит для работы с изображениями, по крайней мере, в больших масштабах, он может использоваться с не такими тяжелыми изображениями в браузере и в небольших проектах.

В этой статье мы покажем вам, как добавить некоторые фильтры изображений к изображениям в браузере с помощью библиотеки Lena.js.

1. Скачать Lena.js

Lena.js — это крошечная библиотека для обработки изображений. Это позволяет применять некоторые базовые фильтры изображений к изображению в документе. Вы можете включить локальную копию Lena.js из вашего проекта или использовать CDN или из локальной копии:

Вы можете скачать копию из хранилища на Github здесь или с помощью какого-нибудь менеджера пакетов, например bower:

bower install lena.js

Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь.

2. Использование Lena.js

LenaJS довольно прост в использовании, вы можете использовать 2 метода, а именно filterImage а также redrawCanvas, Эти методы ожидают изображения и холста, которые будут использоваться для применения некоторого фильтра:

Доступные фильтры

Lena.js предлагает множество фильтров, которые можно применить к вашему изображению. Следующий список показывает идентификатор каждого фильтра:

red: Красный
gaussian: Гауссовский
grayscale: Оттенки серого
highpass: высокая частота
invert: инвертировать
laplacian: лапласиан
prewittHorizontal: Prewitt по горизонтали
prewittVertical: Prewitt Вертикальный
robertsРобертс
saturation: насыщенность
sepia: сепия
sharpen: точить
sobelHorizontal: sobel Horizontal
sobelVertical: sobel Вертикальный
thresholding: порог

Фильтры хранятся в одной и той же глобальной переменной LenaJS и могут быть доступны через ее идентификатор с помощью ключевой или точечной нотации, например, LenaJS["prewittHorizontal"] или же LenaJS.prewittHorizontal, Эти свойства являются функциями, однако они не используются вами непосредственно как функция, а для LenaJS как «константа».

Как это работает?

Волшебство происходит с LenaJS.filterImage метод. Этот метод ожидает в качестве первого аргумента холст, на котором должно быть отображено изображение с фильтром, в качестве второго аргумента — фильтр (как константа), который будет применен, и в качестве последнего аргумента — элемент IMG, в котором хранится изображение. Изображение может быть либо файлом, загруженным через src, либо как URI данных base64:




// Get the image
var originalImage = document.getElementById("original-image");
// The canvas where the processed image will be rendered (With filter)
var filteredImageCanvas = document.getElementById("filtered-image");
// Filter to apply, in this case the red filter
var filter = LenaJS["red"];
// Apply the filter
LenaJS.filterImage(filteredImageCanvas, filter, originalImage);

Наконец, вы можете экспортировать изображение с помощью примененного фильтра, просто получив его представление base64 с помощью filteredImageCanvas.toDataURL("image/png") метод.

Применение нескольких фильтров

Как уже упоминалось, метод filterImage применяет один фильтр к изображению, однако, если вы выполните его снова, начальный фильтр будет удален. Так что если вы хотите применить фильтр за другим, вам нужно будет использовать redrawCanvas метод вместо. Этот метод ожидает в качестве первого аргумента холст, на котором изображение с фильтром уже было отрендерено, а в качестве второго аргумента новый фильтр, который будет добавлен к изображению:




// Get the image
var originalImage = document.getElementById("original-image");
// The canvas where the processed image will be rendered (With filter)
var filteredImageCanvas = document.getElementById("filtered-image");
// Filter to apply, in this case the red filter
var filter = LenaJS["red"];
// Apply the initial filter
LenaJS.filterImage(filteredImageCanvas, filter, originalImage);
// Second filter to apply in this case the invert
var secondFilter = LenaJS["invert"];
// Apply the second filter (with the first filter that has been already applied)
LenaJS.redrawCanvas(filteredImageCanvas, secondFilter);