—»     —»   Фотографии в ретро-стиле при помощи HTML5 Canvas и Vintage.js
  Раздел: Web-приложения, Java-Скрипты   Нет комментариев  

Фотографии в ретро-стиле при помощи HTML5 Canvas и Vintage.js



HTML5, javascript и Canvas становятся невероятно могучими, когда дело доходит до обработки изображений. Совсем недавно мы рассказывали вам о jQuery-плагине tiltShift.js, который, как можно понять из названия, позволяет вам применять к изображения настолько популярный сегодня эффект миниатюры. Сегодня мы хотим представить вам vintage.js. Этот jQuery-плагин, также доступный как веб-сервис, позволяет вам придать вашим фотографиями такой вид, будто они были сделаны век назад. И он делает это не просто хорошо, он делает это великолепно!

Vintage.js: веб-сервис и галерея

Немецкий разработчик Роберт Флейшманн представил невероятно простой способ виртуального состаривания фотографий. Множество параметров помогают вам «подкрутить» результат, довести их до идеала. Если вы планируете использовать плагин на собственном веб-сайте, но не уверены в его возможностях, то вам стоит взглянуть на веб-сайт проекта. Такое же решение предлагаем вам в том случае, если вы ищете простой и быстрый способ придать вашим фотографиям состаренный вид.

Vintagejs.com предлагает веб-приложение, в котором вы можете загружать собственные фотографии и редактировать их посредством простых ползунков, а затем выставлять их на обозрение в постоянно растущей галерее. Последнее, конечно же, по желанию. Следующее изображение демонстрирует нам возможный результат, который может быть достигнут посредством vintage.js:

Фотографии в ретро-стиле при помощи HTML5 Canvas и Vintage.js

Перед применением фильтра к изображению, оно выглядело следующим образом:

Фотографии в ретро-стиле при помощи HTML5 Canvas и Vintage.js

Обязательно познакомьтесь с онлайн-сервисом. Вы заметите, что применять фильтры довольно просто, у вас будет такое ощущение, будто вы работаете в редакторе WYSIWYG. Вы быстро привыкнете к интерфейсу и вам не потребуются какие-либо академические навыки для того, чтобы воспользоваться им:

Фотографии в ретро-стиле при помощи HTML5 Canvas и Vintage.js

После того, как вы завершите применять фильтры, вы можете скачать результат или поделиться им, опубликовав в общую галерею. Там можно видеть тысячи страниц фотографий. Качество, конечно, отличается ввиду того, что над фотографиями работали разные люди…

Vintage.js: плагин вашего собственного веб-сайта

После того, как убедитесь, что vintage.js достаточно мощный для того, чтобы удовлетворить ваши требования, то давайте рассмотрим техническое применения плагина. Vintage.js требует jQuery. Более того, вам придется встраивать плагин и сопутствующий CSS-файл:

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

Vintage.js вызывается один раз, что делает его простым в использовании. Если вы хотите применить его к изображению, то нужно просто применить класс vintage. Таким образом, javascript определяет то, где скрипт должен быть активен. Вызов функции будет выглядеть следующим образом:

<script>
$(function () {
$('img.vintage').click(function () {
$(this).vintage();
});
});
</script>

Вы можете выбирать из 3 доступных пресетов. Вы без труда сможете понять, что можно получить от каждого пресета, так как они названы sepia, green и grayscale. Если вам хотелось бы получить больше контроля, то vintage.js как раз для вас. Вы можете не работать с пресетами, а просто вводить собственные параметры в вызов функции.

Данный вариант напоминает возможности при использовании онлайн-сервиса. Кроме возможности менять все параметры, которые изменяют вид изображения, вы также можете изменять формат файла. Функция обратного вызова позволяет вам решать, какие из следующих этапов должны быть включены после выполнения основной задачи. Функции вызова с достаточным количеством параметров должны выглядеть следующим образом:

<script>
$(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
});
});
});
</script>

Vintage.js работает во всех современных браузерах и в IE9. Важно только, чтобы была поддержка элемента canvas. Разработчик Роберт Флейшманн предоставляет вам плагин абсолютно бесплатно. И плагин и онлайн-сервис работают абсолютно бесплатно, как для личных, так и для коммерческих проектов, и распространяется под лицензионным соглашением MIT и GPL.

Ссылки:

* Веб-приложение – vintagejs.com
* Галерея – vintagejs.com
* Репозиторий – Github
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: фотография, HTML 5, jQuery, винтаж, javascript
Опубликовал Design FactoRy   Прочитано (раз): 5872   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930