Advertisement
  1. Code
  2. PHP

Легка зміна розміру зображення за допомогою РНР

Scroll to top
Read Time: 10 mins

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

Ви завжди хотіли мати простий, універсальний спосіб зміни зображень в РНР? Саме для цього і призначені класи РНР - функції багаторазового використання, вони виконують брудну роботу за кулісами. Ми навчимося створювати свій власний клас, який буде добре побудований і гнучкий. Зміна розміру повинна бути легкою. На скільки? Як раз, два три!


Вступ

Ось швидкий огляд того, чого ми намагаємося досягти, а для цього наш клас повинен бути:

  • Простим у використанні.
  • Незалежним від формату. Тобто, відкриваємо, змінюємо розмір, зберігаємо зображення в різних форматах.
  • Інтелектуальна зміна розміру - без спотворення зображення!

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

У нас багато роботи - давайте почнемо.


Крок 1. Підготовка.

Ми почнемо з простого. В вашій робочій папці створіть два файла: один з назвою index.php, а інший - class.php.


Крок 2. Виклик об'єкта.

Щоб дати вам уявлення про те, чого ми прагнемо досягти, почнемо з кодування викликів, які ми використовуватимемо для зміни розміру зображень. Відкрийте файл index.php і додайте наступний код.

Як ви можете бачити, в тому, що ми робимо, є красива логіка. Ми відкриваємо файл зображення, встановлюємо розміри, до яких ми хочемо змінити зображення, і вказуємо тип зміни розміру.
Далі ми зберігаємо зображення, вибираємо потрібний формат і якість зображення. Збережіть і закрийте файл index.php.

З вищенаведеного коду видно, що ми відкриваємо файл jpg, але зберігаємо gif. Пам'ятайте, що це все стосується гнучкості.


Крок 3. Скелет класу.

З об'єктно-орієнтованим програмуванням (ООП) це цілком можливо. Подумайте про клас як про паттерн; ви можете інкапсулювати дані - сленгове слово, яке просто означає приховувати дані. В майбутньому ми можемо використовувати цей клас знову і знову без необхідності переписувати код для зміни розміру. Вам потрібно буде тільки викликати відповідні методи, як ми робили це на другому кроці. Коли паттерн створено, ми створюємо екземпляри цього паттерну, які називаються об'єктами.

"Функція побудови, відома як конструктор - це спеціальний метод класу, який викликається класом при створенні нового об'єкта".

Давайте почнемо створювати наш клас зміни розміру. Відкрийте файл resize-class.php. Нижче приведена базова структура скелету класів, яку я назвав "resize". Зверніть увагу на рядок з іменем змінної класу. Дещо пізніше ми почнемо додавати тут наші важливі змінні класу.

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

Зверніть увагу, це подвійне підкреслення для методу construct.


Крок 4. Конструктор.

Ми збираємося змінити метод конструктора. По-перше, ми передамо ім'я файла (і шлях) нашого зображення, які потрібно змінити. Ми назвемо цю змінну $fileName.

Нам потрібно відкрити файл, переданий за допомогою РНР (а конкретніше PHP GD Library), щоб РНР міг прочитати зображення. Ми робимо це за допомогою методу користувача "openImage". Я розповім, як цей метод
працює буквально за мить, а поки що нам потрібно зберегти результат як змінну цього класу. Клас змінної - це просто змінна, але вона є специфічною для цього класу. Пам'ятаєте коментар змінної класу, який я згадував раніше? Додайте "image" як приватну змінну, набравши "private $image;". Встановивши змінну як "Private", ви встановлюєте область видимості цієї змінної, тому доступ о неї може отримати тільки клас. З цієї миті ми можемо зробити виклик нашому відкритому зображенню, відомому як ресурс, який ми робитимемо пізніше, коли змінимо розмір.

Поки ми тут, давайте збережемо висоту і ширину зображення. У мене таке відчуття, що вони будуть корисні пізніше.

Тепер у вас повинно бути наступне:

Методи imagesx і imagesy вбудовані в функції, які є частиною бібліотеки GD. Вони, відповідно, отримують ширину та висоту вашого  зображення.


Крок 5. Відкриття зображення.

В попередньому кроці ми викликали метод користувача openImage. На даному етапі ми створимо цей метод. Ми хочемо, щоб скрипт думав замість нас, тому залежно від типу файла, який передається, скрипт повинен визначити, яку функцію бібліотеки GD він викликає, щоб відкрити зображення. Цього легко досягти, порівнявши розширення файлів за допомогою аргумента switch.

Ми переходимо в наш файл, щоб змінити розмір і повернути даний файловий ресурс.


Крок 6. Як змінити розмір.

Тут починається найцікавіше. Даний крок є всього лиш поясненням того, що ми збираємося робити - тому тут немає домашнього завдання. На наступному кроці ми створимо метод public, який викликатимемо, щоб виконати зміну розміру. Тому має сенс задати ширину і висоту, а також інформацію про те, як ми хочемо змінити зображення. Давайте одну хвилинку поговоримо про це. Повинні бути сценарії, в яких ви хотіли б змінити розмір зображення до потрібного. Чудово, давайте це включимо. Проте будуть випадки, коли вам потрібно буде змінити розмір сотні зображень, і кожне зображення має інше співвідношення сторін - подумайте про портретні зображення. Зміна їх розміру до точного приведе до викривлення зображення. Якщо ми розглянемо варіанти, щоб уникнути деформацій, ми можемо:

  1. Змінити розмір максимально наближено до нових розмірів зображення, зберігаючи пропорції.
  2. Змінити розмір зображення максимально наближено до нових розмірів зображення і відрізати залишок.

Обидва варіанти є життєздатними в залежності від ваших потреб.

Так, ми спробуємо реалізувати все вищесказане. В результаті, ми спробуємо забезпечити опціями, щоб:

  1. Змінити розмір точно по ширині/висоті (точно).
  2. Змінити розмір по ширині - буде встановлена точна ширина, а висота буде мінятися відповідно до пропорції. (пейзаж).
  3. Змінити розмір по висоті (як і по ширині), але висота буде вказана, а ширина буде змінюватись відповідно (портрет).
  4. Автоматично визначати пункти 2 і 3. Якщо ви зациклюєте папку з зображеннями різного розміру, дозвольте скрипту визначити, як діяти (авто).
  5. Змінити розмір, а потім обрізати. Це мій улюблений. Точний розмір, без спотворень (обрізання).

Крок 7. Зміна розміру. Давайте це зробимо!

Метод resize складається з двох частин. Суть першої в тому, щоб отримати оптимальну ширину і висоту для нашого зображення, створивши деякі спеціальні методи і, звичайно, передавши параметр "змінити розмір", як це було описано вище. Ширина і висота повертаються в якості масиву і встановлюються в відповідні змінні. Ви можете сміливо  "pass as reference" - але я не фанат цього.

Друга частина – це те, що реально виконує зміну розміру. Щоб скоротити даний урок, я розповім про наступні функції GD:

Ми також зберігаємо виведення методу imagecreatetruecolor (нове істинне кольорове зображення) в якості змінної класу. Додайте "private $imageResized;" з іншими змінними класу.

Зміна розміру виконується модулем PHP, відомим як бібліотека GD. Багато методів, які ми використовуємо, надаються даною бібліотекою.


Крок 8. Дерево рішень.

Чим більше роботи ви зробите зараз, тим менше доведеться робити, коли мінятимете розмір. Цей метод вибирає маршрут прийняти, з метою отримання оптимального resize ширину та висоту на основі розміру варіант. Він викличе відповідний метод, який ми створимо в наступному кроці.


Крок 9. Оптимальні розміри.

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


Крок 10. Обрізання.

Якщо ви обрали обрізку, тобто опцію crop, тоді у вас є ще один маленький крок. Ми обріжемо зображення
з центру. Обрізування - процес, дуже схожий на зміну розміру, але з передачею декількох параметрів розміру.


Крок 11. Збереження зображення.

Ми практично дістались до фінішу. Прийшов час зберегти зображення. Ми проходимо шлях і якість зображення, яке нам потрібно, в діапазоні від 0 до 100, 100 - найкращий варіант, далі викликаємо відповідний метод. Декілька слів про якість зображення: JPG використовує діапазон від 0 до 100, 100 - найкраща якість. Зображення GIF не мають налаштувань якості зображення. PNG мають, але вони використовують діапазон від 0, до 9, 0 - найкраща якість. Це не дуже добре, оскільки ми можемо не пам'ятати про це, щоразу зберігаючи фотографію. Додамо трохи чар, щоб все стандартизувати.

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


Висновок

Ось і все, друзі. Дякую, що пройшли даний урок, сподіваюсь, він був корисним для вас. Буду вдячним за ваші відгуки в коментарях нижче.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.