В данной записи я покажу вам библиотеку которая позволяет добавлять фильтры на изображения, библиотека называется Philter. Это очень простая и удобная библиотека, которая позволяет легко добавлять фильтры на фото.
Ссылка на библиотеку — http://specro.github.io/Philter/
Для работы с данной библиотекой, необходимо её подключить к вашему проекту и для изображений прописать специальные атрибуты. В самом низу нужно прописать следующий код.
<script>
new Philter();
</script>Обесцвечивание изображения
Вы можете задать обесцвечивание изображения, цвет будет появляться когда вы наведете на изображение курсор. Для активации данного эффекта нужно прописать следующий атрибут data-philter-grayscale="100 0". Первое число в значение атрибута показывает на сколько сильно должно обесцвечиваться изображение пока на него не наведен курсор, второе значение указывает — когда на него навели курсор.
Наложение фильтра определенного цвета
Для наложения фильтра определенного цвета, необходимо прописать следующий атрибут — data-philter-color="#235668 80". Первым значением указываем код цвета, второе значение указывает процент усиления работы фильтра.
Указываем несколько цветов для фильтра
Данный плагин позволяет использовать несколько цветов для создания фильтра, для этого нужно указать атрибут data-philter-duotone="#7028e4 #e5b2ca" и передать в него цвета.
Улучшение изображения
Вы можете просто улучшить изображение: настроить контраст, увеличить насыщенность, яркость.
data-philter-saturate="125" — насыщенностьdata-philter-brightness="125" — яркостьdata-philter-contrast="125" — контрастностьdata-philter-hue-rotate="1" — оттенок
