Делаем Instagram фильтры с помощью jQuery

Опубликовал: 6 лет назад Уроки

Создаем web приложение с Instagram подобными фильтрами

Добрый день посетители блога Виктора Доценко.

От меня не было давненько никаких новостей, но на то есть свои причины. Сегодня я хотел бы с Вами рассмотреть и создать приложение, которое будет накладывать на изображения Instagram подобные фильтры. Я уже писал в блоге про action для Photoshop в стиле Instagram, которые все еще в доработке, но сегодня речь пойдет совсем не об этом. На основе этого урока, вы научитесь создавать приложение, которое позволит вам перетаскивать фотографии с вашего персонального компьютера в окно браузера, а так же обрабатывать и применять фильтры подобные тем, что использует популярный Instagram. Создавайте русский Instagram =) Интересно? Тогда в полную новость...

Тема урока:

В этом уроке мы собираемся сделать простое веб-приложение, которое позволяет перетаскивать фотографии с вашего компьютера в окно браузера, а также применять фильтры подобные тем, что используются в  Instagram. Для достижения результатов мы будем использовать ряд библиотек JavaScript и плагинов:

  • CamanJS - это мощная библиотека, которая позволяет применять различные эффекты и фильтры на изображения. Библиотека поставляется с 18 предустановленными фильтрами, которые мы будем использовать в этом уроке (вы можете создать больше, если хотите);
  • Filereader.js - это легкая оболочка HTML5 для drag/drop событий, что позволяет нам существенно облегчать нашу работу. Она также добавляет метод jQuery, так что вы можете привязать события к определенному элементу;
  • jQuery Mousewheel - Я использую данную библиотеку для прокрутки контейнера с фильтрами, колесиком мыши.

Создаем разметку

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

В дополнение к библиотекам, которые упоминал во вступлении, у нас будет так же script.js, в котором находится код, который мы опишем с вами чуть ниже. В header мы так же подключили парочку шрифтов из Google Web Fonts.

instagram

Пример работы нашего «псевдо» Instagram приложения

JavaScript / JQuery

Для того, чтобы наше приложение заработало, мы должны сделать следующее:

  1. Принять изображение, которое мы переместили в приложение;
  2. Создать новый элемент холста (оригинал), с разрешением 500x500px  и сохранить его в памяти;
  3. Отследить клики по фильтрам. Когда выбрали фильтр:
    • Создать клон оригинального холста;
    • Удалить все элементы холста на странице;
    • Добавить клон #foto div;
    • Если выбранный фильтр отличается от «Normal» тогда, сделать запрос в библиотеку Caman. В противном случае ничего не делать;
    • Отметить выбранный фильтр «активным» классом.
  4. Запуск "Normal" фильтра.

Теперь, когда мы знаем, что нужно сделать, давайте преступим к работе:

assets/js/script.js

Этот пример работает во всех современных браузерах, которые поддерживают drag/drop события. Я советую использовать Вам Google Chrome. Ведь даже Opera переходит на движок WebKit. Некоторые фильтры используют  интенсивные вычисления, так что, возможны некоторые задержи перед наложением фильтров. Я специально занизил разрешение до 500×500 для того, чтобы все обрабатывалось намного быстрей. Вы можете выставить по своему усмотрению.

source

Вывод:

Вот так вот легко создать при помощи таких богатых и функциональных библиотеках JS, интересные веб приложения. Я надеюсь данный урок вам понравится и вы найдете его полезным для себя. Подписывайтесь, комментируйте и творите! Всего доброго друзья! До скорых встреч.

Источник: Martin Angelov

Перевод: Виктор Доценко


Новая система комментариев
comments powered by HyperComments