Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

Как сделать Web-приложение, с Instagram-фильтрами

Урок есть и в видеоформате! Смотреть?

Всем приветы! Сегодня замечательный день, а значит время замечательного урока. Сегодня, мы будем учиться создавать простое веб-приложение, с помощью которого, лишь перетащив нужную нам фотографию на страничку, мы сможем украсить её различными instagram фото-фильтрами.


    Для этой цели, мы будем использовать несколько JavaScript библиотек и плагинов:

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

    Также, большое спасибо Дженн и Тони Боту предоставившие изображение для примера.

    HTML

    Первый шаг состоит в написании HTML-шаблона:

    index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>Instagram-like Filters with jQuery | Tutorialzine Demo</title>
    <link href="assets/css/style.css" rel="stylesheet" />

    <!-- подключаем шрифт Yanone Kaffeesatz -->
    <link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200" rel="stylesheet" />

</head>
<body>

    <h1>Instagram <b>Filters</b></h1>
    <div id="photo"></div>

    <div id="filterContainer">
        <ul id="filters">
            <li> <a href="#" id="normal">Normal</a> </li>
            <li> <a href="#" id="vintage">Vintage</a> </li>
            <li> <a href="#" id="lomo">Lomo</a> </li>
            <li> <a href="#" id="clarity">Clarity</a> </li>
            <li> <a href="#" id="sinCity">Sin City</a> </li>
            <!-- 14 остальных фильтров в примере -->
        </ul>
    </div>

    <!-- Библиотеки -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="assets/js/filereader.min.js"></script>
    <script src="assets/js/caman.full.js"></script>
    <script src="assets/js/jquery.mousewheel.min.js"></script>
    <script src="assets/js/script.js"></script>

</body>
</html>

    Дополнительно ко всем библиотекам о которых велась речь сверху, я создам ещё script.js файл, в котором будет находиться код, рассмотренный ниже. В разделе head,  вы можете увидеть, что подключён шрифт Yanone Kaffeesatz от Google, который поможет с декорированием нашего текста.

    JavaScript/jQuery

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

  1. Разрешить перетаскивание изображения;
  2. Создать новый элемент canvas (для хранения оригинала), с максимальными размерами 500x500px (настраиваемый) и сохранить его в памяти;
  3. Отлавливать клики на фильтрах, и в зависимости от выбора, выполнять следующие действия:
  • Создать клон оригинального элемента canvas (холста);
  • Удалить все созданные ранее холсты;
  • Добавить клон в блок #photo;
  • Если выбранный фильтр, отличается от «Нормального», то обращаемся к библиотеке Caman. В ином случае, ничего не делаем;
  • Активному фильтру назначаем class «active»
  1. Изначально, запускаем «Нормальный» фильтр, т.е. перетащенное изображение остаётся в оригинальном виде.

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

    assets/js/script.js

$(function() {

    /*
        В этом коде мы собираемся сделать следующее:

        1. Разрешить перетаскивание изображения;
        2. Создать новый элемент canvas (для хранения оригинала), с максимальными размерами 500x500px (настраиваемый) и сохранить его в памяти;
        3. Отлавливать клики на фильтрах и в зависимости от выбора, выполнять следующие действия:
            Создать клон оригинального элемента canvas (холста);
            Удалить все созданные ранее холсты;
            Добавить клон в блок #photo;
            Если выбранный фильтр, отличается от «Нормального», то обращаемся к библиотеке Caman. В ином случае, ничего не делаем;
            Активному фильтру назначаем class «active».
        4.    Изначально, запускаем «Нормальный» фильтр, т.е. перетащенное изображение остаётся в оригинальном виде.

    */

    var    maxWidth = 500,
        maxHeight = 500,
        photo = $('#photo'),
        originalCanvas = null,
        filters = $('#filters li a'),
        filterContainer = $('#filterContainer');

    // Используем fileReader плагин для прослушивания,
    // а файл drag and drop в блоке photo:
    
    photo.fileReaderJS({
        on:{
            load: function(e, file){

                // Если изображение было удалено:

                var img = $('<img>').appendTo(photo),
                    imgWidth, newWidth,
                    imgHeight, newHeight,
                    ratio;

                // Удаляем холст элементов слева на странице
                // от предыдущего изображения drag/drops.

                photo.find('canvas').remove();
                filters.removeClass('active');

                // Когда изображение будет успешно загружено,
                // мы можем узнать его ширину/высоту:

                img.load(function() {

                    imgWidth  = this.width;
                    imgHeight = this.height;

                    // Рассчитываем новые размеры изображения,
                    // ставим внутри maxWidth и maxHeight ограничители

                    if (imgWidth >= maxWidth || imgHeight >= maxHeight) {

                        // Если изображение слишком большое,
                        // уменьшаем его 500x500!

                        if (imgWidth > imgHeight) {

                            // в этом блоке
                            ratio = imgWidth / maxWidth;
                            newWidth = maxWidth;
                            newHeight = imgHeight / ratio;

                        } else {

                            // А если изображение квадратной формы, или высокое
                            ratio = imgHeight / maxHeight;
                            newHeight = maxHeight;
                            newWidth = imgWidth / ratio;

                        }

                    } else {
                        newHeight = imgHeight;
                        newWidth = imgWidth;
                    }

                    // Создаём новый холст.

                    originalCanvas = $('<canvas>');
                    var originalContext = originalCanvas[0].getContext('2d');

                    // Делаем изображение по центру холста

                    originalCanvas.attr({
                        width: newWidth,
                        height: newHeight
                    }).css({
                        marginTop: -newHeight/2,
                        marginLeft: -newWidth/2
                    });

                    // Размещаем изображение на холсте,
                    // задаём новые параметры длины и ширины
                    originalContext.drawImage(this, 0, 0, newWidth, newHeight);

                    // Мы не нуждаемся в этом больше
                    img.remove();

                    filterContainer.fadeIn();

                    // Запускаем по умолчанию "обычный" фильтр
                    filters.first().click();
                });

                // Устанавливаем src img, которое будем
                // оптимизировать для дальнейшей с ним работы:

                img.attr('src', e.target.result);
            },

            beforestart: function(file){

                // Загружать только изображения.
                // Возвращаем false если это другой файл.

                return /^image/.test(file.type);
            }
        }
    });

    // Слушаем события на фильтрах, при клике и принимаем необходимое решение

    filters.click(function(e){

        e.preventDefault();

        var f = $(this);

        if(f.is('.active')){
            // Применить фильтр только один раз
            return false;
        }

        filters.removeClass('active');
        f.addClass('active');

        // Копируем холст
        var clone = originalCanvas.clone();

        // Клонируем изображение на холсте, а также
        clone[0].getContext('2d').drawImage(originalCanvas[0],0,0);

        // Добавляем клон на страницу, и панель фильтров
        // с помощью Caman библиотеки

        photo.html(clone);

        var effect = $.trim(f[0].id);

        Caman(clone[0], function () {

            // Если фильтр выбран, используем его:

            if( effect in this){
                this[effect]();
                this.render();
            }
        });

    });

    // Используем mousewheel плагин для прокрутки
    // или ползунок снизу фильтров

    filterContainer.find('ul').on('mousewheel',function(e, delta){

        this.scrollLeft -= (delta * 50);
        e.preventDefault();

    });

});

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

    Ура! Мы сделали это!
    Было бы здорово, объединить в браузере наш пример с функцией Photobooth tutorial  и, в конечном итоге с реальным приложением Instagram-like. Но я оставлю это, как упражнение для читателя ;)

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 09.02.2013
Опубликовал: Сергей Кашурин
Просмотров: 490
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


5 прекраснейших дизайнерских решений для ваших форм входа
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!
Colorizer: пользователь сам выберет цвет продукта на вашем сайте
Когда вы выбираете машину, или футболку в интернет магазине, хотелось бы вам самим выбрать для неё цвет? Думаю да. В этой статье, я расскажу вам про плагин Colorizer, с помощью которого, для наших дорогих пользователей, мы сможем предоставить возможность выбора цвета продукта в котором он заинтересован, что оставит о нас приятное впечатление и заявку на покупку. jQuery плагин Colorizer - изменим цвет к лучшему.
23 jQuery плагина для организации слайд-шоу и галерей на сайте
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.
Картридж для лазерного принтера LaserJet HP M1132MFP
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.
Пластиковые окна класса А - окна в самаре акция .
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: