плагин для создания фильтров

Обзор плагина Philter. Плагин для добавления фильтров для изображений

В данной записи я покажу вам библиотеку которая позволяет добавлять фильтры на изображения, библиотека называется 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" – оттенок

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

Оставить комментарий

avatar
  Подписаться  
Уведомление о