Advertisement
  1. Code
  2. Web Development

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

by
Read Time:21 minsLanguages:

Ukrainian (українська мова) translation by Nadia Gonzales (you can also view the original English article)

Веб-застосування повинні надавати користувачам зручні для використання рішення для завантаження та маніпулювання мультимедіа (*  технології, які дозволяють за допомогою комп'ютера інтегрувати, обробляти й одночасно відтворювати різноманітні типи сигналів, різні середовища, засоби і способи обміну інформацією. Забезпечують зберігання величезних масивів даних, довільного інтерактивного доступу до їхніх елементів і відтворення на екрані ПК відеосюжетів із звуковим супроводом. Тут в надалі примітка перекладача).   При цьому у деяких користувачів з мінімальними навичками редагування зображень можуть виникнути труднощі. Обрізування зображень – це одна з найчастіших операцій над зображеннями, і в цьому покроковому посібнику буде розглянуто процес розроблення плаґіна для обрізування зображень з нуля для бібліотеки JavaScript jQuery.


Стисле повторення

У попередній частині ми розглянули, як:

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

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


Крок 1: Додаємо додаткові опції для налаштування плаґіна

Відкрийте /resources/js/imageCrop/jquery.imagecrop.js та додайте наступний код:

Ми додали додаткові опції та дві функції зворотного виклику: onChange та onSelect. Ці дві можуть бути доволі корисними для отримання стану плаґіна.

Опції

Нижче наводиться стислий огляд опцій, що додаємо:

  • aspectRatio – використовується для встановлення значення aspect ratio (* співвідношення розмірів; відношення ширини зображення в пікселях до висоти з урахуванням відношення лінійних розмірів екрана; для монітора ПК і телевізійного екрана зазвичай становить 4:3, для HDTV - 16:9)  виділеної області зображення (значення за налаштуванням – 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-бітовим поданням кольору (16,7 млн кольорів), яка передбачає збереження червоної, зеленої та синьої складових кольору в пам'яті зображення на противагу системі із збереженням логічних кольорів (logical co­lours), яка перетворює їх у червоні, - зелені та сині складові за допомогою колірної палітри. Система   істинного кольору економічніша за обсягом потрібної пам'яті, але відрізняється меншою швидкодією під час перетворень зображення) Далі ми викликали метод imagecopyresampled() для копіювання та зміни розміру частини зображення,  використовуючи проріджування (пікселів) зображення (* перетворення [зображення] для зміни його просторової або часової різкості – шляхом повторної вибірки (квантування) вихідної інформації з більш високою або більш низькою чистотою або шляхом інтерполяції для компенсації відмінностей у форматі пікселів або в частотах відтворення (display rate)). Тип поточного документа не відповідає тому, що нам необхіден, тому ми викликаємо функцію header() для його зміни на image/jpeg. Зображення, які нам більше не потрібні, ми знищуємо за допомогою функції imagedestroy(). За допомогою exit() ми припиняємо виконання поточного скрипта.


От і все.

Тепер у нас є повністю налаштовуваний плаґін jQuery для обрізування зображення, за допомогою якого користувачі може задавати, змінювати розмір та перетаскувати область виділення; також у плаґіні є можливість виведення підказки про розмір зображення та панелі для попереднього перегляду. І так, він виглядає так само і в  Internet Explorer 6! На цьому завершується наш посібник із двох частин! Дякую за проявлену зацікавленість!

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.