Создание веб-приложения с фильтрами, как в Instagram

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

Пример Скачать (.zip, 198 Кб)

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

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

HTML

Первым шагом пишем HTML каркас приложения:

index.html

Еще стоит добавить, что мы включили в проект файл script.js. О нем речь пойдет позже. И добавили шрифт Yanone Kaffeesatz из Google Web Fonts.

Instagram Filter App

JavaScript/jQuery

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

  1. Примем изображение через drag&drop;
  2. Создадим новый элемент канвы (оригинал), с максимальным размером 500x500px (настраиваемо) и сохраним его в памяти;
  3. Будем наблюдать за кликами на фильтрах, когда один из них будет выбран:
    • Создадим копию канвы оригинала;
    • Удалим любой элемент канвы на странице;
    • Применим копию на элемент div с id равным photo
    • Если выбранный фильтр будет отличатся от “Normal”, тогда вызовем библиотеку Caman. Иначе ничего вызывать не будем;
    • Пометим выбранный фильтр классом “active”.
  4. Запустим фильтр “Normal”.

Приступим к созданию кода!

assets/js/script.js

Этот пример будет работать во всех браузерах, поддерживающих технологию drag/drop. Некоторые из фильтров могут нагружать процессор компьютера, поэтому могут быть отставания в прорисовке изображения при выборе фильтра. Чтобы ускорить процесс, мы ограничили ширину и высоту получаемых изображений, но вы можете поставить свои ограничения.

Это все!


Оставить комментарий