Lecaw

Учимся создавать Web-сайты

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

February 8, 2013 299hits

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

ДЕМО Исходные файлы

 

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

Также большое спасибо Jenn и Tony Bot за предоставленные фотографии.

HTML

Компьютеры и моноблоки DESTEN спроектированы с учетом самых передовых технологий. Они подходят для решения различных задач, обеспечивая возможность работы с современными ресурсоемкими приложениями, имеют оптимальное соотношение цены, системный блок купить,  что делает настольные компьютеры DESTEN выгодным приобретением.

Начнем с разработки структуры:

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>

В главном разделе я подключил веб-шрифт Yanone Kaffeesatz от Google.

JavaScript/jQuery

Для работы приложения нам понадобится:

  1. Убедиться, что изображение перетащили в окно браузера;
  2. Создать новый (исходный) элемент холста, с макс. sizeof (настраиваемым) 500x500px и сохранить его в памяти;
  3. Переключение фильтров Instagram фильтров онлайн
    • Создать клон исходного холста;
    • Удалить любые элементы холста на странице;
    • Добавить клон #photo к контейнеру;
    • Если выбранный фильтр отличается от "Нормального", вызоввать библиотеку Caman. В противном случае ничего не делать;
    • Отметить выбранный фильтр с классом “active”.
  4. Инициировать "Нормальный" фильтр.

Теперь пора перейти к коду:

assets/js/script.js

$(function() {
	var	maxWidth = 500,
		maxHeight = 500,
		photo = $('#photo'),
		originalCanvas = null,
		filters = $('#filters li a'),
		filterContainer = $('#filterContainer');
	photo.fileReaderJS({
		on:{
			load: function(e, file){
				var img = $('<img>').appendTo(photo),
					imgWidth, newWidth,
					imgHeight, newHeight,
					ratio;
				photo.find('Canvas').remove();
				filters.removeClass('active');
				img.load(function() {
					imgWidth  = this.width;
					imgHeight = this.height;
					if (imgWidth >= maxWidth || imgHeight >= maxHeight) {
						if (imgWidth > imgHeight) {
							// Wide
							ratio = imgWidth / maxWidth;
							newWidth = maxWidth;
							newHeight = imgHeight / ratio;
						} else {
							// Tall or square
							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();
				});
				img.attr('src', e.target.result);
			},
			beforestart: function(file){
				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);
		photo.html(clone);
		var effect = $.trim(f[0].id);
		Caman(clone[0], function () {
			if( effect in this){
				this[effect]();
				this.render();
			}
		});
	});
	filterContainer.find('ul').on('mousewheel',function(e, delta){
		this.scrollLeft -= (delta * 50);
		e.preventDefault();
	});
});

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

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(2 голосов)

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