prowebber.ru - Тут есть все для настоящих вебмастеров

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Всё для вебмастера » Web » Скрипты » Vintage.js - плагин для создания винтажных картинок

Vintage.js - плагин для создания винтажных картинок


Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
У нас вы можете скачать бесплатно Vintage.js - плагин для создания винтажных картинок.


Vintage.js - плагин для создания винтажных картинок


Демо: http://vintagejs.com/gallery/page:0

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

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.


Репозиторий - https://github.com/rendro/vintageJS


+12
Просмотры: 3536 VIP ProWebber | Комментарии (5)
Теги: vintage, javascripts
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1vov7512

  • 4 октября 2012 18:29
  • Регистрация: 14.03.2012
  • ICQ: --
  • Комментариев: 17
нормально так ok

0

#2mask3d

  • 4 октября 2012 19:40
  • Регистрация: 3.03.2010
  • ICQ: --
  • Комментариев: 15
  • Выкл.
Спасибо за новость!

0

#3web coding

  • 4 октября 2012 22:00
  • Регистрация: 4.10.2012
  • ICQ: --
  • Комментариев: 30
Спасибо за новость!

0

#4kiosaki

  • 11 октября 2012 00:28
  • Регистрация: 2.09.2009
  • ICQ: --
  • Комментариев: 171
Непонятно как сделать, как в демке, что бы заработала заливка фоток...инструкция какая-то маленькая.

0

#5maksim994

  • 16 февраля 2013 16:37
  • Регистрация: 13.02.2012
  • ICQ: --
  • Комментариев: 16
прикольный скрипт, спасибо автору

0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

Последние комментарии:

Искать людей

Ваши переписки