Винтажный эффект для фото с помощью jQuery-плагина

Чтобы использовать vintageJS вам необходима библиотека jQuery и браузер, который поддерживает элемент HTML5 Canvas. Вы можете настроить эффекты путем добавления различных опций при вызове vintageJS. VintageJS был протестирован в следующих браузерах:

• Mozilla FireFox 3 +,
• Google Chrome 9 +,
• Apple Safari 5 +,
• Opera 11 +
• Internet Explorer 9.

Пример использования

Вначале Вам необходимо подключить к странице библиотеку jQuery, скрипт vintageJS и стили vintageJS (см. исходники на github.com):

<script src="src/jquery.js"></script>
<script src="src/vintage.js"></script>
<link rel="stylesheet" type="text/css" href="css/vintagejs.css" media="all" />

Следующий шаг, это добавление событий для фотографий, к которым необходимо применить ретро-эффект. В этом примере мы будем использовать событие click:

$(function () {
	$('img.vintage').click(function () {
		$(this).vintage();
	});
});

Вот и все! Теперь добавьте изображение с классом «vintage» на вашу HTML-страницу и нажмите на него, чтобы увидеть результат.

Опции

Вы можете изменить эффект путем добавления опций при вызове vintageJS.

• default: по умолчанию, используется при отсутствии каких-либо настроек
• sepia: эффект сепии
• green: зеленый цвет накладывается на эффект
• grayscale: изображение становится черно-белым
• custom: для создания своего собственного варианта винтажного эффекта

Если вы хотите изменить стили на ваши собственные, то следующими настройками можно управлять:

• vignette: Чтобы отключить эффект виньетки установите эту опцию равную false. В противном случае вам нужно установить две переменные "black" и "white" со значениеми между 0 и 1. Пример: vignette: {black:0.5, white:0.2}
• noise: добавление шума на изображение.
• screen: добавление слоя с размытием цветов. Вы можете определить сплошной цвет и непрозрачность слоя. Пример: screen: { red: 227, green: 12, blue: 169, strength: 0.1 }
• desaturate: False или значения между 0 и 1, которое представляет собой процент, на сколько изображение будет обесцвечено
• allowMultiEffect: Если этот флаг установлен как true, то вы можете вызвать эффект несколько раз. Значение по умолчанию - false.
• mime: mime тип изображения. По умолчанию image/jpeg
• viewFinder: Путь к изображению, которое добавляет TTV-эффект. Вы найдете пример изображения в исходниках documentation/img/viewfinder.jpg (Источник: Nesster с Flickr)

Вот как может выглядеть пользовательский вызов:

$(function () {
	$('img.vintage').click(function () {
		$(this).vintage({
			vignette: {
				black: 0.8,
				white: 0.2
			},
			noise: 20,
			screen: {
				red: 12,
				green: 75,
				blue: 153,
				strength: 0.3
			},
			desaturate: 0.05
		});
	});
});

• Требования: JQuery Framework
• Лицензия: MIT, лицензия GPL