Advertisement
  1. Code
  2. Web Development

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

by
Read Time:15 minsLanguages:

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

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


Крок 1: Налаштовуємо робоче середовище

Для початку ми налаштуємо робоче середовище, необхідне для роботи з цим посібником. Почніть зі створення дерева папок та порожніх файлів, названих, як показано нижче на зображенні:

Directory tree

Далі необхідно завантажити бібліотеку JavaScript jQuery та помістити її до папки /resources/js/. Зображення, яке будемо використовувати в посібнику, необхідно назвати example.jpg та помістити його до папки /resources/images/. Ви можете скористатися цим зображенням (подякуємо gsso-stock), що входить до складу початкових файлів для цього посібника, або своїм власним. І останній файл – outline.gif, який необхідно помістити до папки /resources/js/imageCrop/.


Крок 2: Створюємо сторінку для тестування

Для тестування нашого плаґіна нам необхідно буде додати його до зображення. Перед тим, як розпочати роботу над плаґіном, ми створимо просту сторінку з цим зображенням.

Код HTML

Відкрийте ваш улюблений текстовий редактор і напишіть наступний код у файлі index.html:

Тут нема нічого особливого: простий код HTML. Ми додали таблицю зі стилями для сторінки, jQuery, файли нашого плаґіна (поки що пусті) і розмістили всередині документа зображення.

Код CSS

Тепер відредагуйте style.css, як показано нижче:

Ми налаштували вигляд нашої сторінки, змінивши колір фону та додавши головне стильове оформлення для заголовка та зображення.


Крок 3: Пишемо базову версію плаґіна jQuery

Давайте почнемо зі створення базової версії плаґіна jQuery.

«Дізнайтеся більше про створення свого власного плаґіна в цьому пості. У ньому розглядаються головні відомості, усталені практики та поширені «підводні камені», про які варто знати при розробленні вашого плаґіна».

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

Ми щойно розширили можливості jQuery завдяки додаванню нового методу до об'єкта jQuery.fn. Тепер у нас є простісінький плаґін, у якому до кожного об'єкта після його завантаження застосовується метод imageCrop (* тобто плаґін можна буде ініціювати для декількох зображень). Зверніть увагу на те, що зображення з кеш-пам'яті іноді не генерують подію load, тому для підстраховування ми встановлюємо заново значення атрибута src.


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

Завдяки наданню можливості додавання опцій плаґін стає набагато гнучкіше для користувачів.

Ми визначили об'єкт з опціями за налаштуванням, потім об'єднали їх з користувальницькими опціями за допомогою виклику функції setOptions. Тепер давайте напишемо тіло цієї функції.

$.extend() додає вміст двох або більше об'єктів до першого об'єкта.

Опції

Нижче роз'яснюється, для чого використовується кожна опція плаґіна.

  • allowMove – за допомогою цієї опції вказується, чи може рухатися виділена область зображення (значення за налаштуванням – true).
  • allowResize – за допомогою цієї опції вказується, чи можна змінювати розмір виділеної області зображення (значення за налаштуванням – true).
  • allowSelect – за допомогою цієї опції вказується, чи може користувач задавати нову область виділення (значення за налаштуванням – true).
  • minSelect – за допомогою цієї опції задається мінімальний розмір області, по досягненні якого нову виділену область зображення буде прийнято (* а не скинуто)  (значення за налаштуванням – [0, 0]).
  • outlineOpacity – використовується для задання прозорості контуру (значення за налаштуванням – 0.5).
  • overlayOpacity – використовується для задання прозорості верхнього шару (значення за налаштуванням – 0.5).
  • selectionPosition – використовується для задання розташування виділеної області зображення (значення за налаштуванням – [0, 0]).
  • selectionWidth – використовується для встановлення значення ширини виділеної області зображення (значення за налаштуванням – 0).
  • selectionHeight – використовується для встановлення значення висоти виділеної області зображення (значення за налаштуванням – 0).

Крок 5: Налаштовуємо шари

На цьому етапі ми змінимо DOM для підготовки до наступного кроку: створення інтерфейсу плаґіна.

Layers overviewLayers overviewLayers overview

Для початку ми проведемо ініціалізацію шару зображення.

Тепер ініціалізуйте тримач зображення (* елемент, в якому буде розташовано зображення).

Як ви бачите, його розміри такі ж, як і в зображення, а також для нього використовується відносне позиціонування.  Далі ми викликаємо функцію .wrap() для поміщення зображення усередину тримача.

Поверх шару із зображенням буде знаходитися верхній.

Цей шар має ті ж самі розміри, що й зображення, проте для нього задано абсолютне позиціонування. Ми отримуємо значення прозорості з options.overlayOpacity і дозволяємо jQuery його використовувати. Також у цього елемента є id, так що ми можемо змінювати його властивості за допомогою таблиці зі стилями плаґіна. Наприкінці ми викликаємо метод .insertAfter() для розміщення верхнього шару одразу після зображення.

Наступний шар – триґерний (* триґер – сукупність умов, які ініціюють виконання дії); ми розмістимо його після верхнього шару таким же чином, як ми робили з попереднім.

У цілому значення background color не відіграє ролі, проте воно повинно бути відмінним від прозорого (значення за налаштуванням). Цей шар невидимий для користувача, проте завдяки ньому будуть оброблюватися деякі події.

Поверх триґерного шару ми розмістимо шар для контура.

І, нарешті, переходимо до останнього шару.

Метод  .attr() повертає значення переданого до нього атрибута. Ми скористалися ним для отримання значення src зображення та встановлення його в якості значення background шару для виділення області.

Використання абсолютного позиціонування для елементів, що знаходяться всередині елементів з відносним позиціонуванням.

Цілком ймовірно, що ви вже в курсі про це, але повідомлю, що за допомогою елемента з відносним позиціонуванням ви отримуєте контроль над елементом усередині нього з абсолютним позиціонуванням. Саме тому для шарів тримача використовується відновне позиціонування, а для всіх інших шарів – абсолютне.

Відмінне пояснення цієї техніки дається в цій статті.


Крок 6: Оновлюємо інтерфейс

Для початку ми ініціалізуємо деякі змінні.

За допомогою selectionExists ми дізнаємося, чи є область виділення. У змінній selectionOffset будемо зберігати значення відступу відносно початку координат зображення, а у змінній selectionOrigin – значення початкових координат області виділення. Скоро стане набагато зрозуміліше.

Наступні умови необхідні для перевірки наявності області виділення після завантаження плаґіна.

Далі ми викликаємо функцію updateInterface() вперше для ініціалізації інтерфейсу.

Ми напишемо тіло цієї функції дуже скоро. А зараз давайте попрацюємо над нашою першою подією.

Ми викликаємо .mousedown(), якщо значення options.allowSelecttrue. Завдяки цьому для події mousedown, що виникає на триґерному шару, буде назначено обробник. Таким чином, якщо користувач клацає зображення, то буде викликана функція setSelection().

Перша функція – getElementOffset() – повертає значення лівої та правої координат переданого їй об'єкта відносно документа. Ми їх отримали за допомогою виклику методу .offset(). Друга функція – getMousePosition() – повертає координати поточного положення курсору (відносно позиції зображення). Таким чином, ми будемо працювати тільки зі значеннями в діапазоні від 0 до ширини/висоти зображення відносно осей х/у відповідно.

Давайте напишемо функції для оновлення наших шарів.

У цій функції на основі значення selectionExists визначається, чи потрібно показувати верхній шар.

За допомогою функції updateTriggerLayer() змінюється форма курсору (перехрестя (crosshair) або форма за налаштуванням (default)) на основі значення options.allowSelect.

Далі беремося за функцію updateSelection(). У ній оновлюється як шар для виділення області, так і шар із контуром.

Спочатку в цій функції встановлюються значення властивостей шару з контуром: форма курсору, тип відображення, розміри та його позиція. Далі працюємо з шаром для виділення області; завдяки новому значенню background-position зображення будуть перекриватися непомітно.

Тепер нам необхідно написати функцію для оновлення курсору у разі потреби. Наприклад, при виділенні області нам необхідно, щоб курсор залишався у формі перехрестя (crosshair) незалежно від того, на якому шару він знаходиться.

Так, все саме так просто, як виглядає. Просто змінюємо форму курсору на вказану!

Тепер переходимо до останньої функції на цьому етапі; вона буде нам необхідна для оновлення інтерфейсу плаґіна за різних умов – виділенні області, зміні розмірів, завершенні виділення та навіть при ініціалізації плаґіна.

Як ви бачите, в функції updateInterface() відбувається вибір одного з речень case (* оператор множинного вибору) та виклик певних функцій, що тільки-но написали.


Крок 7: Реалізуємо можливість створення області виділення зображення

На цей момент ми потурбувалися про користувальницькі опції та про інтерфейс, але не торкалися питання взаємодії користувача з плаґіном. Давайте напишемо функцію, за допомогою якої буде відбуватися виділення нової області при клацанні по зображенню.

Отже, спочатку у функції setSelection відбувається виклик двох методів: event.preventDefault() та event.stopPropagation(). Це запобігає виконанню дій за налаштуванням при виникненні подій та сповіщення обробників, назначених для батьківських елементів, про події. Завдяки .mousemove() для події mousemove реєструється обробник. При цьому буде викликатися функція resizeSelection() кожного разу при переміщенні користувачем курсору миші. Для сповіщення про те, що область виділена, значенням selectionExists встановлюється true і розмір області скидається до 0. Далі ми отримуємо початкові координати області виділення за допомогою виклику раніше написаної функції, getMousePosition(), і передаємо їх до  options.selectionPosition. Нарешті, ми викликаємо функцію updateInterface() для оновлення інтерфейсу плаґіна, враховуючи внесені нами зміни.


Крок 8: Реалізуємо можливість зміни розміру області виділення зображення

У попередньому кроці ми написали функцію для реалізації можливості вибору області. Тепер давайте напишемо функцію для зміни розміру цієї області виділення.

Для цього нам необхідно буде отримати поточні координати миші. Оскільки повернене значення обчислювалося відносно розміру зображення, нам необхідно потурбуватися тільки про негативні значення. Область виділення ніколи не вийде за межі зображення. Як ви знаєте, значення властивості width або height не може бути негативним. Тому ми використовуємо Math.abs() для отримання абсолютного значення і потім змінюємо положення виділеної області.


Крок 9: Реалізуємо можливість припинення виділення області зображення

Тепер переходимо до маршруту users.

Після припинення виділення області у releaseSelection() видаляються раніше назначені у функції setSelection() обробники подій за допомогою методу .unbind(). Далі відбувається оновлення початкових координат області виділення та перевірка розміру області виділення, достатнього для того, щоб область виділення було прийнято.

Тепер майже все готово. Закрийте файл та підготуйтеся до наступного кроку.


Крок 10: Додаємо стильове оформлення для плаґіна

Відкрийте таблицю зі стилями /resources/js/imageCrop/jquery.imagecrop.css  та додайте наступний код:

Нічого складного: ми додали декілька стильових правил для верхнього шару та шару з контуром.


Крок 11: Тестуємо остаточний результат

Для тестування нашого плаґіна нам необхідно підключити його до зображення. Давайте це зробимо, відредагувавши наш файл index.html.

Відкрийте тег script ...

... та напишіть наступний код JavaScript.

Ми підключили наш плаґін до елемента зображення з id example та встановили значення деяких користувальницьких опцій. Ми скористалися методом .ready() для відстежування моменту, коли DOM повністю завантажено.

Plug-in previewPlug-in previewPlug-in preview

От і все! Збережіть файл та відчиніть ваш браузер для тестування плаґіна.


Наступні кроки

Тепер у нас є базова версія плаґіна jQuery для обрізування зображення, за допомогою якого ми можемо вибрати певну область зображення. У наступній частині ми додамо додаткові опції для налаштування плаґіна, створимо панель для попереднього перегляду, напишемо певний код, що буде виконуватися на сервері, для обрізування зображень... і багато ще чого. Сподіваюся, що ви з користю провели час і викладений тут матеріал вам знадобиться. Дякую за проявлену зацікавленість!

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.