Главная → Программирование → by

Обработка изображения с JQuery & PHP GD

Одно из многочисленных преимуществ, вызванных взрывом JQuery и других библиотек JavaScript является легкость, с которой можно создавать интерактивные инструменты для вашего сайта.В сочетании с серверными технологиями, такими как PHP, это ставит серьезные количество энергии у вас под рукой tips.

В этой статье я буду смотреть на то, как объединить JavaScript / JQuery с PHP и, в частности, в PHP GD библиотеку для создания инструмента для работы с изображениями, чтобы загрузить изображение, а затем обрезать его и, наконец, сохранить пересмотренный вариант на сервере.Конечно, есть плагины там, что вы можете использовать, чтобы сделать это, но эта статья призвана показать вам what’ S за процессом.Вы можете скачать исходный files ( updated) для reference.

We’ все видели такого рода веб-приложений до — Facebook, Flickr, футболки печать сайтов.Преимущества очевидны, в том числе по функциональности, как это, вы освобождающее от необходимости вручную редактировать фотографии из посетителей, который имеет очевидные недостатки.Они не могут иметь доступ или обладают необходимыми навыками, чтобы использовать Photoshop, и в любом случае, почему вы хотите, чтобы сделать опыт посетителей труднее

Перед Start

В этой статье вы в идеале имели по крайней мере некоторый опыт работы с PHP.Не обязательно GD — I’ буду управлять вами через эту часть, и GD очень доброжелателен в любом случае.Вы также должны быть по крайней мере среднего уровня в JavaScript, хотя, если you’ повторно быстро начинающий обучение, вы должны быть прекрасными, как well.

Несколько слов о технологиях you’ должны будете работать через эту статью.You’ понадобится PHP тестовый сервер работает библиотека GD, либо на ваш хостинг или, если работает локально, через что-то вроде XAMPP.GD пришла в комплекте с PHP в качестве стандарта для некоторое время, но вы можете убедиться в этом, запустив phpinfo() функции и проверяя, что it’ S доступно на вашем сервере.На стороне клиента стрелке you’ понадобится текстовый редактор, некоторые фотографии и копии jQuery.

Настройка Files

И пошло-поехало, то.Установите рабочую папку и создать четыре файла в нем: index.php js.js image_manipulation.php __ и 5 | css.css. Index.php является фактическим веб-страницы, js.js __ и 5 | css.css должно быть очевидным, в то время image_manipulation.php будет хранить код, который обрабатывает загруженные изображения, а затем, позже, экономитманипулировали version.

В index.php, в первую let’ S добавить строку PHP для запуска PHP сессии и позвонить в нашу image_manipulation.php файла:

После этого, добавьте в DOCTYPE и каркасно-структуры страницы (заголовок, тело областях и т.д.) и позвоните в JQuery и CSS листа через скрипт и ссылки тегиrespectively.

Добавить каталог в папке, называется imgs, который будет получать загруженные файлы.Если you’ работаете на удаленном сервере, убедитесь, что вы установите права доступа на каталог, например, что сценарий будет иметь возможность сохранять файлы изображений в it.

Во-первых, let’ S созданы и применяются несколько основных стилей, чтобы загрузить facility.

Загрузить Functionality

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

<h1>Image uploader and manipulator</h1>

Пожалуйста, обратите внимание, что мы определяем ENCTYPE = ’ multipart/form-data’ которая необходима всякий раз, когда ваша форма содержит загрузку файлов fields.

Как вы можете видеть, форма довольно простой.Он содержит 3 поля: поле для загрузки само изображение, текстовое поле, так что пользователь может дать ему имя и кнопку.Кнопка отправки имеет имя, чтобы он мог выступать в качестве идентификатора для наших PHP скрипт обработчик который будет знать, что форма была submitted.

Let’ добавим знание CSS наших стилей: 

/* -----------------
| UPLOAD FORM
----------------- */
#imgForm { border: solid 4px #ddd; background: #eee; padding: 10px; margin: 30px; width: 600px; overflow:hidden;}
	#imgForm label { float: left; width: 200px; font-weight: bold; color: #666; clear:both; padding-bottom:10px; }
	#imgForm input { float: left; }
	#imgForm input[type="submit"] {clear: both; }
	#img_upload { width: 400px; }
	#img_name { width: 200px; }

Теперь у нас есть основной странице настройки и стиль.Далее нам нужно, чтобы пресечь в image_manipulation.php и подготовить его для получения представленном виде.Что приводит приятно на validation…

Пользователи Form

Open до image_manipulation.php.Так как мы сделали точки над включения его в наш HTML страницы, мы можем быть уверены, что, когда it’ S называют в действие, она будет находиться в environment.

Let’ S создать условия, чтобы PHP знает, что задача его просят сделать.Помните, что мы назвали нашу кнопку Отправить upload_form_submitted?PHP теперь можно проверить свое существование, так как сценарий знает, что он должен начать обработку form.

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

/* -----------------
| UPLOAD FORM - validate form and handle submission
----------------- */

if (isset($_POST['upload_form_submitted'])) {
	//code to validate and handle upload form submission here
}

Таким образом, если форма была отправлена, состояние решает true и любой код, положить внутрь, он будет выполнять.Этот код будет код подтверждения.Зная, что форма была отправлена, теперь есть пять возможных препятствий на пути успешного сохранения файла: 1) поле загрузки была оставлена ​​пустой, 2) поле имени файла было пустым, 3) обе эти поля были заполнены, но файлбыть загружены не является допустимым файлом изображения, 4) изображение с желаемым именем уже существует; 5) все нормально, но по какой-то причине сбоя сервера, чтобы сохранить изображение, возможно, из-за подать разрешения вопросов.Let’ посмотрим на код, поднимая каждый из этих сценариев, если таковые возникают, то we’ положу все это вместе строить наше проверки script.

Объединены в единый сценарий проверки, весь код выглядит так, как follows.

/* -----------------
| UPLOAD FORM - validate form and handle submission
----------------- */
 
if (isset($_POST['upload_form_submitted'])) {

	//error scenario 1
	if (!isset($_FILES['img_upload']) || empty($_FILES['img_upload']['name'])) {
		$error = "Error: You didn't upload a file";

	//error scenario 2
	} else if (!isset($_POST['img_name']) || empty($_FILES['img_upload'])) {
		$error = "Error: You didn't specify a file name";
	} else {

		$allowedMIMEs = array('image/jpeg', 'image/gif', 'image/png');
		foreach($allowedMIMEs as $mime) {
			if ($mime == $_FILES['img_upload']['type']) {
				$mimeSplitter = explode('/', $mime);
				$fileExt = $mimeSplitter[1];
				$newPath = 'imgs/'.$_POST['img_name'].'.'.$fileExt;
				break;
			}
		}

		//error scenario 3
		if (file_exists($newPath)) {
			$error = "Error: A file with that name already exists";

		//error scenario 4
		} else if (!isset($newPath)) {
			$error = 'Error: Invalid file format - please upload a picture file';

		//error scenario 5
		} else if (!copy($_FILES['img_upload']['tmp_name'], $newPath)) {
			$error = 'Error: Could not save file to server';

		//...all OK!
		} else {
			$_SESSION['newPath'] = $newPath;
			$_SESSION['fileExt'] = $fileExt;
		}
	}
}

Есть несколько вещей, чтобы отметить here.

$ Ошибке & $ _SESSION ['NEWPATH']

Во-первых,Отметим, что I’ м при использовании переменной $ ошибку, войти ли мы ударить любого из препятствий.Если ошибка не возникает, и изображение будет сохранено, мы устанавливаем переменную сессии, $_SESSION['new_path'], хранить путь к сохраненному изображению.Это будет полезно в следующий этап, где мы должны выводить изображение и, следовательно, нужно знать его SRC.

I’ м, используя переменную сессии, а не просто переменная, так что, когда придет время для нашей PHP скрипт, чтобы обрезать изображение, мы don’ т должны передать его переменной информирования скрипт, который Изображение в использовании — сценарийуже знаю контекста, потому что он будет помнить эту переменную сессии.Хотя эта статья doesn’ T озабоченность себя глубоко с безопасностью, это просто мера предосторожности.Делая это означает, что пользователь может влиять только на образ, который он загружен, чем, возможно, кто-то else’ с ранее сохраненных изображений — Пользователь заблокирован в манипулировании только изображение, указанные в $error и не имеет возможности обеспечить соблюдениеPHP скрипт, чтобы повлиять на другого image.

$ _FILES Superglobal

Обратите внимание, что хотя форма была отправлена ​​по почте, мы получаем доступ к загрузке файла не через $_POST суперглобальная (т. е. переменные в PHP, которые имеются во всех областях видимости скрипта), а через специальное $_FILES суперглобальная.PHP автоматически присваивает файлу поля, что, если форма была отправлена ​​с необходимой enctype='multipart/form-data' атрибут.В отличие от $_POST и $_GET суперглобальных, $_FILES суперглобальная идет немного “ deeper” и фактически является многомерный массив.Благодаря этому, вы можете получить доступ не только сам файл, но и различные мета-данные, связанные с ней.Вы увидите, как мы можем использовать эту информацию в ближайшее время.Мы используем эту мета-данных в третьей стадии проверки выше, а именно проверка, что файл был правильный файл изображения.Давайте посмотрим на этот код в немного более detail.

Подтверждение окончания загрузки image

Любое время you’ Re позволяет пользователям загружать файлы на сервер, вы, очевидно, хотите, чтобы полностью взять под контроль именно какие файлы вы позволяете быть загружены.Она должна быть ослепительно очевидно, но вы don’ T хотим, чтобы люди могли загружать любые файлы только для Вас сервер – это должно быть что-то вы контролировать, и tightly.

Мы могли бы проверить по расширению файла – всего это будет небезопасно.Просто потому, что что-то имеет расширение JPG, doesn’. Т означает, что ее внутренний код является то, что картинка.Вместо этого, мы проверяем по MIME-тип, который является более безопасной (хотя и не совсем совершенен)

Для этого мы проверяем, загружены file’ S MIME-тип – который живет в ‘ type’ собственностью его массива – против белого списка разрешенных MIME-types.

$allowedMIMEs = array('image/jpeg', 'image/gif', 'image/png');
foreach($allowedMIMEs as $mime) {
	if ($mime == $_FILES['img_upload']['type']) {
		$mimeSplitter = explode('/', $mime);
		$fileExt = $mimeSplitter[1];
		$newPath = 'imgs/'.$_POST['img_name'].'.'.$fileExt;
		break;
	}
}

Если найдено совпадение, мы извлекаем его расширение и использовать его для формирования имени we’ будем использовать, чтобы сохранить file.

Для извлечения расширения мы используем тот факт, что MIME-типы всегда в формате нечто / что-то – т.е. мы можем полагаться на косой черты.МыПоэтому ‘ explode’ строки на основе этого разграничены.Explode возвращает массив частей – В нашем случае, из двух частей, часть MIME-тип обе стороны черты.Мы знаем, поэтому, что вторую часть Array ([1]) является расширением связанные с MIME-type.

Заметим, что если соответствующий MIME-тип будет найден, мы устанавливаем две переменные: $ NEWPATH и $ fileExt.Оба этих будет важно позднее PHP, который фактически сохраняет файл, но бывший также используется, как вы можете видеть, по ошибке сценария 4 в качестве средства обнаружения ли MIME взгляд составила successful.

Сохранение file

Все загруженные файлы назначается временный дом на сервере до тех пор, пока сессия истекает или они перемещаются.Таким образом, сохранение файла означает перемещение файла из временного хранилища для постоянного проживания.Это делается с помощью copy() функции, которые должен знать два довольно очевидные вещи: what’ S путь к временному файлу, а what’ S путь, по которому мы хотим положить it.

Ответ на первый вопрос считывается с tmp_name часть $_FILES суперглобальная.Ответ на второй представляет собой полный путь, в том числе новое имя файла, куда вы хотите, чтобы жить.Таким образом, формируется из имени каталога мы создали для хранения изображений ( / imgs), а также новое имя файла (т.е. значение, введенное в img_name поле) и расширение.Давайте назначить его своим переменной, $newPath, а затем сохраните файл: 

$newPath = 'imgs/'.$_POST['img_name'].'.'.$fileExt;
...
copy($_FILES['img_upload']['tmp_name'],$newPath);

Отчетов и перемещение On

Что происходит дальше, полностью зависит от того, произошла ошибка, и мы можем это узнать, посмотрев ли $error установлен.Если это так, мы должны довести эту ошибку обратно пользователю.Если it’ ы не установлены, it’ пора двигаться дальше и показать изображение и позволяет пользователю манипулировать.Добавьте следующий над формой: 

<?php if (isset($error)) echo '<p id="error">'.$error.'</p>'; ?>

Если there’ с ошибкой, we’ D хочу показать форму снова.Но форма в настоящее время установлен, чтобы показать, независимо от ситуации.Это необходимо изменить, так что она показывает только, если изображение не было загружено еще, то есть, если форма hasn’ T был представлен еще, или если она имеет, но произошла ошибка.Мы можем проверить, является ли загруженное изображение было сохранено путем опроса $_SESSION['newPath'] переменной.Оберните ваши формы HTML в следующих двух строк кода: 

<?php if (!isset($_SESSION['newPath']) || isset($_GET['true'])) { ?>

<?php } else echo '<img src="'.$_SESSION['newPath'].'" />'; ?>

Сейчас на форме появляется только тогда, когда загруженное изображение isn’ T зарегистрировано — т.е. $_SESSION['newPath'] isn’ T множество — или new=true находится в URL-адресе.(Эта последняя часть дает нам средство позволяет пользователю начать все заново с новой загрузки изображений, если они того пожелают; we’ будем добавлять ссылку на это в данный момент).В противном случае, загруженного изображения дисплеев (мы знаем, где он живет, потому что мы сохранили свой путь в $_SESSION['newPath']).

Это хорошее время, чтобы подвести итоги, где мы находимся, так что попробовать его.Загрузите изображение и убедитесь, что она показывает.Предполагая, что делает, it’ время для наших наличие предоставить некоторые интерактивность изображение manipulation.

ДобавлениеInteractivity

Во-первых, let’ S продлить линию мы только что добавили, чтобы мы) дают изображение ID ссылаться на него позже, б) называют наличие самого (вместе с JQuery), и в) мы предоставляем “ стартagain” ссылка, так что пользователь может начать все заново с новой загрузки (при необходимости).Вот фрагмент кода: 

<?php } else { ?>
	<img id="uploaded_image" src="" />
	<p>start over with new image

	<script src="http://www.google.com/jsapi"></script>
	<script>google.load("jquery", "1.5");</script>
	<script src="js.js"></script>

Обратите внимание, что я определил ID для имиджа, а не класс, потому что it’ SA уникальный элемент, а не одним из многих (Это кажется очевидным, но многие люди не соблюдают этого различия при назначении идентификаторов и классов).Заметим также, в image’ S SRC, I’ м добавление случайных строк.Это сделано, чтобы заставить браузер не кэшировать изображения раз we’ ве обрезать его (с SRC doesn’ изменение т).

Открытое js.js и let’ добавим обязательным документом готовы обработчик (DRH), необходимых любое время you’ повторное использование автономных JQuery (т.е. не внутри пользовательской функции), чтобы ссылаться или манипулировать DOM.Поместите следующий наличие внутри этой DRH: 

$(function() {
	// all our JS code will go here
});

We’ повторное предоставление функциональность для пользователя, чтобы обрезать изображение, и это, конечно, означает, что позволило ему перетащить окно область на изображении, обозначив роль, которую он хотел бы сохранить.Таким образом, первый шаг для прослушивания mousedown. Событий на изображении, первый из трех событий, участвующих в операции перетаскивания (мыши, перемещения мыши, а затем, когда поле обращается, мыши вверх) 

var dragInProgress = false;

$("#uploaded_image").mousedown(function(evt) {
	dragInProgress = true;
});

И аналогично, let’ S прислушиваться к окончательной MouseUp event.

$(window).mouseup(function() {
	dragInProgress = false;
});

Обратите внимание, что наши mouseup события работает на window, а не само изображение, так как it’ Возможно, что пользователь может отпустить кнопку мыши в любом месте страницы, не обязательно на image.

Отметим также, что mousedown обработчик события нацелен на получение объекта события.Этот объект содержит данные о событии и JQuery всегда передает е …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.