Thumbnails Теорія та практика створення мініатюрних зображень

Зміст

В англомовній літературі для позначення зменшених копій оригіналів існують два терміни – preview та thumbnail. Жодне з них не має адекватного перекладу в українськомовній літературі, окрім ближчого за змістом терміна - мініатюра. Надалі, у цій статті використовуватиметься це слово і похідні від нього (з метою виключення повторів у тексті) або близькі за змістом висловлювання.

Позначення, прийняті у статті

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

W, H - ширина та висота оригінального зображення, відповідно;
X, Y – координати початкової точки копіювання (лівого верхнього кута);
width, height - ширина та висота мініатюри, відповідно;
R, ratio - відношення меншої сторони до більшої сторони прямокутників оригіналу та мініатюри, відповідно;
Ww – відношення ширини великого прямокутника до ширини маленького;
Hh – відношення висоти великого прямокутника до ширини маленького.

Методи створення мініатюр

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

Розмір мініатюри встановлюється адміністратором фотогалереї та має фіксований розмір,відповідний загальному дизайну. В даний час існує два найбільш поширені способи створення мініатюр:

пропорційно зменшена копія;
вирізання деякого фрагмента оригіналу.

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

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

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

Метод максимального стиснення

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

визначити велику сторону прямокутника початкового зображення;
обчислити відношення R;
обчислити меншу сторону прямокутника мініатюри шляхом множення відношення R та більшої сторони.

На псевдокод це буде описано так:

Таким чином, буде визначено розміри майбутньої копії. Це необхідно для створення зменшеної копії, яка будевписана в задані межі мініатюри без спотворень. Подальші дії полягають у використанні відповідних графічних засобів на стороні сервера перетворення зображень. Наступний приклад ілюструє перетворення, реалізоване на PHP (у припущенні, що вихідне зображення вже завантажено в програму - змінна $srcImage і його розміри отримані в $width і $height ):

Опис цього методу завершимо малюнком, що ілюструє цей підхід.

Фрагмент цілого

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

Наступний код на PHP ілюструє цей підхід:

центральна;
крайні ліва та права сторони;
крайні верхня та нижня межі;
кути прямокутника.

Відповідно, можна говорити про вертикальне та горизонтальне вирівнювання. Алгоритм обчислення координат джерела описаний на псевдокод:

Метод мінімального стиснення

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

Загалом, одна зі сторінвеликого прямокутника має бути вписана у відповідну сторону малого. При цьому коефіцієнт стиснення (масштабування) має бути мінімальним. Цього легко досягти порівнюючи співвідношення відповідних сторін - більше співвідношення визначає сторону, яка буде обрізана при масштабуванні.

Тут використовується алгоритм обчислення початкових координат джерела фрагмента, ідентичний описаному алгоритму.

Так як одна зі сторін більшого прямокутника буде повністю вписана у відповідну сторону меншого, а інша – обрізана, то тут теж можна говорити про вирівнювання – або вертикальне, або горизонтальне.

Пропорційний стиск у відсотках

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

у проектах, де жорстко задані розміри вихідного зображення (фіксована ширина та/або фіксована висота);
при перетворенні великих зображень, коли створення мініатюри в один прохід може призвести до переповнення пам'яті.

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

Ілюстрація створення мініатюр на PHP

У цьому розділі буде детально розглянуто реалізований PHP в рамках об'єктно-орієнтованого походу модуль Thumbnail на основі описаного алгоритму.

Основним публічним методом є метод output(). У своїй роботі він використовує результатроботи методу render(), визначає приймач для виведення зображення (браузер або файл на сервері):

Обов'язковий аргумент функції – ім'я файлу вихідного зображення. За замовчуванням метод виводить результуюче зображення в браузер. Якщо буде вказано другий аргумент - ім'я вихідного файлу, буде створено файл. Третій аргумент методу, асоціативний масив, містить необов'язкові параметри обробки зображень. За замовчуванням використовуються власні установки - методом максимального стиснення створюється мініатюра у форматі PNG розміром 150х150 пікселів.

Логіка класу зі створення мініатюр реалізована методом render() , який завантажує файл зображення на згадку, визначає розміри вихідного зображення, розраховує розміри майбутньої мініатюрної копії, створює нове зображення і повертає посилання нього у разі успішного виконання. При цьому даний метод використовує допоміжні методи для завантаження об'єкта та розрахунку необхідних змінних:

Опції обробки зображення

При необхідності можна вказати аргумент $options (асоціативний масив параметрів - третій аргумент методу output() і другий - метод render() ) для реалізації власної обробки зображень. Для цього необхідно лише вказати необхідні опції

width - ширина мініатюри в пікселях (ціле позитивне число, за умовчанням 150);
height – висота мініатюри в пікселях (ціле позитивне число, за умовчанням 150);
method - метод обробки - максимальний/мінімальний стиск, вирізання фрагмента цілого (ціле число, за замовчуванням максимальний стиск);
percent - масштабування у відсотках від оригіналу (позитивне речове число на інтервалі від 0 до 1, за умовчанням 0);
halign - вертикальне вирівнювання (допустимі значення 0 - поцентру, 0 – вирівнювання по нижньому краю, за умовчанням – 0);
valign – горизонтальне вирівнювання (допустимі значення 0 – по центру, 0 – вирівнювання вправо, за замовчуванням – 0);
type - тип зображення ( IMAGETYPE_PNG або IMAGETYPE_JPEG , за замовчуванням - IMAGETYPE_PNG ).

Обробка помилок

Ніхто не застрахований від помилок, тому модуль реалізує мінімальну обробку типових помилок (невірний формат вхідних даних, неможливість ініціалізації графічного формату) за допомогою генерації повідомлень користувача вбудованою функцією user_error .

Допоміжні методи

Ці методи необхідні для завантаження зображення та розрахунку координат та розмірів області копіювання вихідного та результуючого зображень.

Методи завантаження зображення з файлу - основне призначення визначити джерело зображення (файл, рядок або образ зображення в пам'яті)

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

Зумовлені константи класу

У модулі зумовлено кілька констант для керування методом створення мініатюр та вирівнювання зображень

Приклади використання

Приклад 1. Просте створення мініатюри із виведенням у браузер

Приклад 2. Просте створення мініатюри із збереженням результату у файл

Приклад 3. Використання власних параметрів (JPEG, 200х200 пікселів)

За замовчуванням з будь-якого зображення створюється маленьке зображення у форматі PNG. Вказуючи явно тип, можна змінити формат графічного потоку (у прикладі - JPEG). Для виведення результуючого зображення в браузер другий аргумент встановлено значення null .

Приклад 4. Каскадне створення мініатюри з великого зображення

Останній приклад варто розібрати докладніше.

Спочатку з вихідного зображення вирізається центральний прямокутник, сторони якого становлять рівно половину оригіналу (50%). Потім за другий прохід з отриманого проміжного зображення створюється звичайна зменшена копія (стандартні розміри 150х150 пікселів). Після цього отримане остаточне зображення відображається у браузері.

Висновок

Хоча завдання створення мініатюр не найскладніше завдання, яке розв'язують розробники інтернет-додатків, проте, вона не завжди вирішується на належному рівні і в повному обсязі. У цій статті було розібрано всі варіанти створення мініатюр, коротко розглянуто особливості роботи із зображеннями в PHP.

Методи завантаження та створення реалізують роботу із зображеннями лише у форматах PNG та JPEG. Однак модуль розширюємо і додати відсутню функціональність буде досить легко.