Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Создание плагина jQuery для обрезания изображения с нуля (Часть 2)

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Nadia Gonzales (you can also view the original English article)

Веб-приложения должны предоставлять пользователям удобные для использования решения для закачивания и манипулирования мультимедиа (* форма информации, отличная от текста и статических изображений (аудио, видео). Обычно интерактивная. Здесь и далее примеч. пер.). При этом у некоторых пользователей с минимальными навыками редактирования изображений могут возникнуть трудности. Обрезание изображений – одна из наиболее частых операций над изображениями, и в этом пошаговом руководстве будет рассмотрен процесс разработки плагина для обрезания изображений с нуля для библиотеки JavaScript jQuery.


Краткое повторение

В предыдущей части мы рассмотрели, как:

  • расширить возможности jQuery
  • сделать плагин более гибким за счет добавления пользовательских опций
  • создать базовую версию плагина для обрезания изображений

Сегодня мы усовершенствуем и завершим наш плагин: мы добавим дополнительные пользовательские опции, функции обратного вызова, возможность изменять размер области выделения и ее «перетаскивания», создадим панель для предварительного просмотра и подсказку о размере изображения и напишем немного кода для выполнения на стороне сервера для обрезки изображения.


Шаг 1: Добавляем дополнительные опции для настройки плагина

Откройте ваш файл jquery.imagecrop.js в /resources/js/imageCrop/ и добавьте следующий код:

Мы добавили дополнительные опции и две функции обратного вызова: onChange и onSelect. Эти две могут быть довольно полезными для получения состояния плагина.

Опции

Ниже дается краткий обзор добавляемых нами опций:

  • aspectRatio – используется для установления значения aspect ratio (* соотношение геометрических размеров; отношение ширины изображения в пикселах к высоте с учётом отношения линейных размеров экрана; для монитора и стандартного телевизионного экрана обычно составляет 4:3 (или 1,33:1)) выделенной области изображения (значение по умолчанию – 0).
  • displayPreview – используется для указания, видима или нет панель для предварительного просмотра (значение по умолчанию – false).
  • displaySizeHint – используется для указания, видима или нет подсказка о размере изображения (значение по умолчанию – false).
  • minSize – используется для установления минимальных размеров выделенной области (значение по умолчанию – [0, 0]).
  • maxSize – используется для установления максимальных размеров выделенной области (значение по умолчанию – [0, 0]).
  • previewBoundary – используется для установления размеров панели для предварительного просмотра (значение по умолчанию – 90).
  • previewFadeOnBlur – используется для установления значения прозрачности панели для предварительного  просмотра в тот момент, когда она – не в фокусе (значение по умолчанию – 1).
  • previewFadeOnFocus – используется для установления значения прозрачности панели для предварительного  просмотра в тот момент, когда она – в фокусе (значение по умолчанию – 0.35).
  • onCahnge – возвращает состояние плагина при изменении области выделения.
  • onSelect – возвращает состояние плагина при здании области выделения.

Шаг 2: Добавляем дополнительные слои

На этом этапе мы добавим дополнительные слои. Давайте начнем с подсказки о размере.

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

Теперь мы добавим еще восемь слоев – для размерных  ручек (* графический элемент управления, захват которого указателем мыши позволяет сжимать или растягивать окно или панель в окне по горизонтали и вертикали):

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

И, наконец, переходим к панели для предварительного  просмотра.

Мы инициализировали два слоя:

  • держатель, который выполняет роль рамки изображения, и
  • изображение для предварительного просмотра, атрибут src которого имеет то же самое значение, что и оригинальное изображение.
Directory tree

Мы воспользовались методом .appendTo() для добавления изображения для предварительного просмотра в конце держателя.


Шаг 3: Улучшаем интерфейс

Для начала мы добавим две новые глобальные переменные.

Они нам понадобятся при обновлении функции resizeSelection().

В первой части руководства мы позаботились только об опции allowSelect. Давайте теперь также поработаем с allowMove и allowResize.

Мы подключили обработчики для события mousedown к выделенной области и всем размерным ручкам.

Теперь нам необходимо написать еще немного кода для обновления ранее добавленных слоев.

В функции updateSizeHint() реализуется поведение для двух вариантов значений переданного параметра.

  • Если он не указан, то поведение по умолчанию – отображение и обновление подсказки о размере (если область выделения существует).
  • Второй вариант поведения – исчезновение подсказки. Оно будет использоваться после того , как пользователь прекратил изменять размеры области выделения.

Ранее мы лишь инициализировали размерные ручки. Теперь мы размещаем их в нужных позициях.

Подобно предыдущей функции в updateResizeHandlers() задается поведение для двух вариантов значения параметра: hide-all и default. В первом случае мы вызываем метод .each() для выполнения итерации для выбранных элементов.

Давайте создадим функцию updatePreview().

Код для первых трех случаев должен говорить сам за себя. Мы вызываем метод .animate() для выполнения анимации пары свойств CSS на основе значений пользовательских опций. Далее мы выбираем значение для переменной display и задаем значения для позиции слоя с держателем панели для предварительного просмотра. Затем мы подгоняем размеры изображение для предварительного просмотра под значение опции previewBoundary и определяем его новую позицию.

Также нам необходимо обновить функцию updateCursor().

И теперь переходим к последней функции этого этапа:


Шаг 4: Совершенствуем setSelection()

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

Мы проверили значение опции displayPreview и воспользовались функциями .mouseenter() и .mouseleave() для подключения обработчиков событий к держателю предварительного просмотра.


Шаг 5: Реализуем возможность выбора области выделения изображения

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

Также мы получили отступ выбранной области по отношению к позиции мыши.  Он нам понадобится позже для функции moveSelection().


Шаг 6: Выбор размерных ручек

У пользователя будет возможность изменять размер выбранной области за счет выбора и перетаскивания одной из размерных ручек. Это можно реализовать двумя способами: по обеим осям, если пользователь решает перетаскивать ручку из угла,  или по одной, если – из центра стороны.

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


Шаг 7: Совершенствуем resizeSelection()

В отличие от версии в первой части в функции resizeSelection() будет возможность проверки минимального/максимального размера и фиксирования соотношения размеров выделенной области.

Также мы вызвали функцию обратного вызова для события onChange в конце функции. Функция getCropData() возвращает текущее состояние плагина. Мы напишем ее тело через несколько шагов.


Шаг 8: Реализуем возможность перетаскивания области выделения изображения

Теперь мы напишем код функции moveSelection().

Как и ранее, мы вызвали функцию обратного вызова для события onChange в конце функции.


Шаг 9: Совершенствуем releaseSelection()

Также нам необходимо отредактировать функцию releaseSelection().

Мы сбросили значения условий ограничения изменения размеров (* resizeHorizontally и resizeVertically) и добавили поддержку панели для предварительного просмотра. Также мы вызвали функцию обратного вызова для события onSelect таким же образом, как мы сделали это ранее для события onChange.


Шаг 10: Получаем текущее состояние плагина

Теперь почти все готово. Давайте напишем код функции getCropData().

Мы только что написали последнюю функцию для этого файла. Сохраните его и подготовьтесь к следующему шагу.


Шаг 11: Сокращаем размер кода

«За счет минификации кода сокращается размер кода и время его загрузки».

На этом этапе мы минифицируем код нашего плагина для сокращения его размера и времени его загрузки. Этот процесс состоит в удалении ненужных символов: комментариев, пробелов, новых строк и символов табуляции. Двумя популярными инструментами для минификации кода JavaScript являются YUI Compressor (* компрессор кода JavaScript и CSS от Yahoo!) и JSMin. Мы будем использовать первый. Также YUI Compressor – компрессор с открытым исходным кодом, так что вы можете взглянуть на его код, чтобы точно понять принцип его работы.

Используем YUI Compressor

YUI Compressor написан на Java, так что не важно, какая у вас операционная система. Единственное требование – наличие Java >= 1.4. Скачайте YUI Compressor и извлеките его содержимое в папку /resources/js/imageCrop/. Откройте командную строку и перейдите в директорию с тем же именем.

Если вы используете его в первый раз, то вам следует начать с исполнения следующей строки в командной  строке и прочитать инструкции по использованию.

Теперь давайте минифицируем код.

Не забудьте изменить x.y.z на номер используемой вами версии YUI Compressor. И все; подождите окончания процесса и затем закройте окно командной строки.


Шаг 12: Задаем стилевое оформление для новых элементов.

Откройте /resources/js/imageCrop/jquery.imagecrop.css и добавьте в него следующий код:

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


Шаг 13: Тестируем конечный результат

Для начала давайте добавим минифицированный плагин.

Для того , чтобы протестировать плагин, нам необходимо каким-то образом получить значения размера и позиции выделенной области. Поэтому мы будем использовать функцию обратного вызова для опции onSelect; она возвращает объект с текущим состоянием плагина.

В функции updateForm() устанавливаются значения полей для ввода и их сохранение в случае существования выбранной области. Далее в validateForm() проверяется наличие выбранной области и отображение всплывающего окна с предупреждением о том, что ее необходимо выбрать.

Добавляем форму.

Мы добавили несколько скрытых полей для ввода и кнопку для отправки формы.

Код PHP

Здесь мы воспользуемся PHP и библиотекой GB (* библиотека инструментов для манипулирования изображениями), однако вы можете использовать любой другой язык для написания скриптов, для которого имеется библиотека для работы с графикой.

Создайте пустой файл, назовите его crop.php и запустите свой редактор.

Мы воспользовались методом imagecreatefromjpeg() для создания нового изображения на основе пути к исходному изображению и imagecreatetruecolor() для создания конечного изображения с использованием реалистичного цветовоспроизведения (* достигаемое при 24-битовом кодировании цвета и близкое по качеству к естественной цветопередаче; характеризует графическую систему, по крайней мере, с 24-битовым представлением цвета (16,7 млн. цветов), предусматривающую хранение красной, зелёной и синей составляющих цвета в памяти изображения - в противоположность системе с хранением логических цветов (logical colours) и преобразованию их в красные, зелёные и синие составляющие с помощью цветовой палитры (colour palette). Система "истинного цвета" экономичнее по объёму требуемой памяти, но отличается меньшим быстродействием при преобразованиях изображения). Далее мы вызвали метод imagecopyresampled() для копирования и изменения размера части изображения с использованием прореживания (пикселей) изображения (* преобразование [изображения] для изменения его пространственного или временного разрешения - путём повторной выборки (квантования) исходной информации с более высокой или более низкой частотой либо путём интерполяции для компенсации различий в формате пикселов или в частотах воспроизведения (display rate)). Тип текущего документа не соответствует тому, что на необходим, поэтому мы вызываем функцию header() для его изменения на image/jpeg. Изображения, которые нам более не нужны, мы уничтожаем при помощи функции imagedestroy(). При помощи exit() мы останавливаем выполнение текущего скрипта.


На этом все.

Теперь у нас есть полностью настраиваемый плагин jQuery для обрезания изображения, при помощи которого пользователь может задавать, изменять размер и перетаскивать область выделения; также в плагине имеется возможность выведения подсказки о размере изображения и панели для предварительного просмотра. И да, он выглядит так же само и в Internet Explorer 6! На этом завершается наше руководство из двух частей! Спасибо за проявленный интерес!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.