Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Пример работы jQuery UI PHP и GD. Нанесение аппликаций на изображение

Anna | 29.05.2014 | нет комментариев

Введение

Каждому здравствуй! Здороваюсь с прогром я в 1-й, и верю не конечный, раз. Не смотря на то, что читаю прогр достаточно давным-давно, идея написать что-то пригодное возникла вовсе незадолго, когда на работе я столкнулся с крайне увлекательной задачей — разработка он-лайн редактора коллажей. От того что специального выбора инструментов разработки не было, решили делать средствами js jQuery и php GD. Процесс реализации замышленного оказался крайне увлекательным, и куча полученных позитивных эмоций и новых навыков подтолкнули меня на написание статьи на прогр. В этой статейке я постараюсь рассказать о некоторых увлекательных моментах, с которыми столкнулся при разработке он-лайн редактора.

Задача

По первоначальному плану статьи я хотел описать каждый процесс разработки, но потом передумал, от того что статья получилась бы слишком длинной и имела бы много явственных и выходит каждому внятных пророческой. Следственно план статьи был переработан, и я решил оставить только самые увлекательные и значимые, как мне кажется, моменты.
Итого: речь пойдет об применении jQuery UI в связке с PHP библиотекой GD. В статье я постараюсь, как дозволено доходчивее, показать и рассказать об применении таких вероятностей jQuery UI, как перетаскивание и ресайз элементов. А также образование картинки из сделанных и обработанных пользователем элементов (картинок).
Дабы было больше внятней и наглядней думаю будет не нехорошо сделать рабочий пример(посмотреть дозволено здесь). В примере реализована одна из частей он-лайн редактора, а именно работа с аппликациями, в которой пользователь может наложить на картинку добавочные элементы, перетаскивать их как желательно и ресайзить, позже чего все это «искусство» должно собраться в цельную картинку.
Что-то я много говорю, пора теснее и к делу приступить, начнем.

Решение

Для нетерпеливых сразу выложу рабочий пример: ссылка
И исходники: ссылка

Для начала стоит определиться, что мы будем применять и где.
На стороне заказчика (в браузере), будем пользоваться, не нуждающийся в представлении, библиотекой jQuery и несколькими ее плагинами, а именно Draggable и Resizable.
На сервере будем применять php и библиотеку GD, которая установлена фактически на всяком сервере и хостинге, в различии от больше продвинутого аналога ImageMagick.

Процесс разработки начнем с клиентской части. Нам понадобится сделать рабочую область, в которой пользователь сумеет таскать и ресайзить картинки. А также нужно добавить на страницу панель, в которой будет находится несколько вариантов аппликаций.

Покажу маленький ломтик html, для лучшего понимания:

<div>
	<img src="/resources/images/angelina.jpg" width="500" height="600" id="main_img_big" />
</div>
<div>
	<img src="/resources/applications/1.png" width="64" height="64" id="one_application" />
	<img src="/resources/applications/2.png" width="64" height="64" id="one_application" />
	<img src="/resources/applications/3.png" width="64" height="64" id="one_application" />
	<img src="/resources/applications/4.png" width="64" height="64" id="one_application" />
	<img src="/resources/applications/5.png" width="64" height="64" id="one_application" />
	<img src="/resources/applications/6.png" width="64" height="64" id="one_application" />
	<img src="/resources/applications/7.png" width="64" height="64" id="one_application" />
</div>

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

var num_elem = 0;
// добавление аппликации в рабочую область
function addApplication(element){
	var applicImg = element.clone(); // создаем копию элемента
	// удаляем аттрибуты размеров картинки
	applicImg.removeAttr('width');
	applicImg.removeAttr('height');
	// добавляем родительский див для аппликации в рабочую область
	var allElement = '<div id="move_applic_' num_elem '"><span></span></div>';
	$('.work_area').append(allElement);
	 // добавляем класс для перетаскивания
	applicImg.addClass('applic_new_el');
	// задаем место возникновения в рабочей области
	$('#move_applic_' num_elem).css({
		'top': '0px',
		'left': '0px'
	});
	applicImg.attr('id', 'applic_' num_elem); 
	// добавляем элемент
	$('#move_applic_' num_elem).append(applicImg);	
	init_drag(num_elem); // задаем перетаскивание 
	init_resize(num_elem); // задаем резайз 
	num_elem   ; // увиличение счетчика для аппликаций
}

Как вы теснее обратили внимание, добавляется не только картинка, но еще и совместно с дивом, в тот, что обернута и span`ом. Span будет исполнять роль «крестика», тот, что будет при необходимости удалять не надобную аппликацию из рабочей области.
Позже добавления аппликации, нужно вызвать плагины, для добавления вероятности ресайза и перемещения картиночки.
Для вероятности ресайза будем применять плагин Resizable, вызовем его с поддержкой такой функции:

// ресайз для аппликаций
function init_resize(num_el){
	$('#move_applic_' num_el).resizable({
		aspectRatio: true, // сберегать пропорции
		handles:     'ne, nw, se, sw', // имена классов для угловых блоков
		alsoResize: "#applic_" num_el // расайзим еще и родительский див - рамку
	});
}

Дабы картинка еще и перемещалась по рабочей области, воспользуемся плагином Draggable, для его вызова напишем вот такую функцию:

// задаем перетаскивание для апликации
function init_drag(num_el){
	$('#move_applic_' num_el).draggable({
		cursor: 'move', // вид курсора
		containment: '.work_area', // лимитация перемещения
		scroll: false, // автоскроллинг
		drag: null // событие при перемещении		
	});
}

На этом работа с аппликацией завершена. Все что остается сделать на клиентской стороне – это собрать все данные о добавленных аппликациях и отправить на сервер для обработки. Дабы сделать на сервере такую же картинку, как и в браузере, нам понадобится знать путь до всякой картинки-аппликации, размер (ширину и высоту) и расположение на странице, касательно рабочей области.
Дабы не делать перезагрузку страницы, а также для комфорта передачи данных, воспользуемся ajax`ом. Код для сбора данных об аппликациях и отправки не сервер выглядит вот так:

// создание картинки с наложением аппликации. Запрос на сервер
function ajaxMakeImage(){
	// объявляем нужные массивы
	var arrayWidth = [];
	var arrayHeight = [];
	var arraySrc = [];
	var arrayTop = [];
	var arrayLeft = [];
	var srcImage = $('#main_img_big').attr('src');	
	var workAreaTop = $('.work_area').offset().top;
	var workAreaLeft = $('.work_area').offset().left;	
	var num = 0;
	$('.applic_new_el_div').each(function(e) {
		arrayWidth[num] = $(this).width();
		arrayHeight[num] = $(this).height();
		arraySrc[num] = $(this).children('.applic_new_el').attr('src');
		arrayTop[num] = $(this).offset().top;
		arrayLeft[num] = $(this).offset().left;
		num  ;
	});	
	// отправляем данные на сервер
	$.ajax({
		type: "POST",
		url: "/ajax_action.php",
		data: {
			'arraySrc': arraySrc, // массив путей для аппликаций
			'arrayWidth': arrayWidth, // массив длин аппликаций
			'arrayHeight': arrayHeight,// массив ширин аппликаций
			'arrayTop': arrayTop, // массив отступов сверху для аппликаций
			'arrayLeft': arrayLeft, // массив отступов слева для аппликаций
			'srcImage': srcImage, // ссылка на фотографию(основная картинка)
			'workAreaTop': workAreaTop, // отступ сверху до робочей области
			'workAreaLeft': workAreaLeft, // отступ слева до робочей области
		},
		dataType: "json",
		success: function(data){
			if(data.result == 'success'){	
				// если все прошло удачно
				// выводим готовую картинку
				$('#test_show').attr('src', data.imgSrc);	
				alert('Картинка сделана');
			}else{
				// error
				// @todo итог ошибки
			}
		}
	});
}

Работа в браузере завершена. Сейчас нужно написать на сервере скрипт, тот, что будет обрабатывать полученные данные и опираясь на них генерировать картинку.
Как я теснее говорил, для работы с картинками будем применять библиотеку GD.
Источник: programmingmaster.ru

Оставить комментарий
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB