jquery.toningImage — тонировка фото
jquery.toningImage — небольшой плагин, позволяющий произвести тонировку изображения. А если быть более точным, то производится попиксельная обработка изображения методом HSL или HSV:
- HSL, HLS или HSI (от англ. Hue, Saturation, Lightness (Intensity)) — цветовая модель, в которой цветовыми координатами являются тон, насыщенность и светлота.
- HSV (англ. Hue, Saturation, Value — тон, насыщенность, значение) или HSB (англ. Hue, Saturation, Brightness — оттенок, насыщенность, яркость) — цветовая модель, в которой цветовыми координатами являются тон, насыщенность и яркость.
Следует отметить, что HSV и HSL — две разные цветовые модели: светлота (lightness) отличается от яркости (brightness).
Демо пример демонстрирует некоторые варианты преобразований цветной фото. Проверено в:
- IE 9
- Firefox 7
- Opera 11
- Chrome
Плагин указанные фото оборачивает контейнером и в него добавляет обработанную фото. До работы плагина:
<img src="path-to/pic.png" alt="" />
после:
<span style=&qout;position: relative; display: block"> <img src="path-to/pic.png" alt="" /> <img src="path-to/new-pic.png" alt="" class="toiningImgNew" /> </span>
Работа плагина основана на использовании canvas, поэтому работать будет только в браузерах, его поддерживающих.
Что качать?
- библиотеку jquery качаем отсюда https://jquery.com/download/ или подключаем из хранилища.
- jquery.toningImage.js (8 Kb — не сжатый) — сам плагин.
Быстрый старт
Из CSS правил понадобятся только правила для получаемого изображения (вынесено в CSS чтобы при необходимости проще было им управлять):
.toiningImgNew {
position: absolute;
z-index: 2;
top: 0;
left: 0;
margin: 0;
}
Подключаем библиотеки и инициализируем плагин:
<script src="path-to/jquery.min.js"></script>
<script src="js/jquery.toningImage.js"></script>
<script>
$(window).load(function(){
// переводим фото в черно-белый вид
$("img").jToningImage();
});
</script>
Параметры
| Название параметра | Описание | значение по умолчанию |
|---|---|---|
| metod | метод обработки изображения. Возможные значения: HSL (по умолчанию) или HSV | |
| hue | цветовой тон, значение в пределах 0-360 | |
| saturation | насыщенность, варьируется в пределах 0—100. Чем больше этот параметр, тем «чище» цвет, поэтому этот параметр иногда называют чистотой цвета. А чем ближе этот параметр к нулю, тем ближе цвет к нейтральному серому | |
| bright | яркость нового рисунка или его светлота в зависимости от используемого метода HSV или HSL соответственно. Также задаётся в пределах 0—100 | |
| color | несколько готовых шаблонов. Доступные значения: inverse, grey (по умолчанию), sepia. Если задан этот параметр, отменяются действия: hue, bright, saturation. |
Вот так может выглядеть более сложный вызов плагина:
$(window).load(function(){
$("#myImage").jToningImage({
hue: 30,
bright: null,
saturation: 25,
metod: "HSV"});
});
Просто менять оттенки изображения скучно и не интересно. Посмотрим несколько примеров с эффектами, которые можно получить используя jquery.toningImage:
- смена черно-белого изображения на цветное при ховере;
- «гасим» фото при клике
- оставляем без изменений определенный цвет и/или участок (это требует ручной доводки скрипта)
По теме
- HSV (цветовая модель) — https://ru.wikipedia.org/wiki/HSV_%28%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BC%D0%BE%D0%B4%D0%B5%D0%BB%D1%8C%29
- HSL — https://ru.wikipedia.org/wiki/HSL
- Эффект отражения