jquery.toningImage — тонировка фото

Дата публикации: 20.10.2011

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, поэтому работать будет только в браузерах, его поддерживающих.

Что качать?

Быстрый старт

Из 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
  • Эффект отражения