Основи роботи з бібліотекою GD

31.12.2021

449

Від автора: дуже часто при розробці сценаріїв необхідно працювати з зображеннями, використовуючи мову PHP. Наприклад, генерація зображень з нуля або редагування вже існуючих і т. д. Тому в даному уроці ми з Вами вивчимо основи роботи з бібліотекою GD, яка призначена для обробки зображень засобами мови PHP.

Введення

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

Тому, так як, бібліотека є розширенням, значить необхідно переконатися, що вона підключена у Вашому інтерпретатор мови PHP. Для цього необхідно відкрити головний конфігураційний файл PHP – php.ini. Якщо Ви використовуєте Denver, значить Вам необхідно перейти у віртуальний диск, створений ним (в моєму випадку це диск Z). І потім за адресою: Z:\usr\local\ php5. В корені папки php5 Ви знайдете необхідний файл. Далі відкриваємо файл у текстовому редакторі, знаходимо рядок: extension=php_gd2.dll

Якщо навпроти цієї рядки, немає символу “;” (крапка з комою), означає розширення підключено, якщо ж символ є, його необхідно видалити і перезапустити Denver. У цьому випадку Ви підключите бібліотеку. Тепер можна приступати до роботи з бібліотекою.

Основи створення та редагування зображень

Для того щоб вивести на екрані зображення, необхідно використовувати тег img і в атрибуті src, даного тега, потрібно вказати шлях до зображення. Але в нашому випадку зображення створюється за допомогою мови PHP. Тому в атрибуті src ми вкажемо шлях до файлу php, який створить потрібне нам зображення. Отже, створюємо файл index.php, який буде виводити на екран зображення, з наступним вмістом:

Тут ми визначаємо кодування, шляхом відправлення заголовка браузера і виводимо зображення за допомогою тега img. Далі створюємо файл index.php і починаємо писати код. Отже, як в будь-якому графічному редакторі, перед тим як створити зображення, необхідно створити пустий аркуш або пусте зображення. Безпосередньо на якому, ми будемо створювати потрібне нам зображення. Бібліотека GD не виняток, тому першим ділом створимо пусте зображення:

Функція imagecreatetruecolor() — створює нове повнокольорове зображення, з заданими розмірами. Розміри (ширину і висоту) передаємо параметрами до даної функції. Функція повертає дискриптор (ресурс), відкритого зображення, необхідний для подальшої роботи з ним. Так як він, як би, ідентифікує наше зображення. Тепер давайте виведемо на екран наше зображення. Для цього додамо наступний код:

header(“Content-Type:image/jpeg”);
imagejpeg($img,NULL,100);

Дивіться, насамперед відправляємо заголовок браузеру – тобто, повідомляємо, що тип відображуваного контенту – це зображення типу image/jpeg. Потім викликаємо функцію imagejpeg(), яка виводить або зберігає зображення, залежно від стану другого параметра. Параметри передаються даної функції:

$img – дискриптор зображення, яке необхідно створити, або вивести на екран.;

NULL – якщо в даному параметрі, передати ім’я файлу, то буде створено зображення і збережено під цим ім’ям. В нашому випадку потрібно відобразити зображення на екрані. Тому передаємо NULL.

100 – відсоток якості зображення. Як Ви знаєте формат jpeg – це архівний формат, тому при створенні такого зображення, потрібно вказувати якість.

Тепер давайте подивимося в браузері, що у нас вийшло:

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

$im1 = imagecreatefromjpeg(‘1.jpg’);
header(“Content-Type:image/jpeg”);
imagejpeg($im1,NULL,100);

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

imagecreatefrompng — створює нове зображення з зображень png;

imagecreatefromgif — Створює нове зображення з зображень формату gif;

Далі визначимо ширину і висоту створеного порожнього зображення:

$width = imagesx($im1);
$height = imagesy($im1);

Думаю, Ви вже здогадалися, що функція imagesx() – повертає ширину вибраного зображення в пікселях. А функція імадеѕу() – висоту. Обом функцій необхідно передати параметром дискриптор відкритого зображення. Перед тим, як зобразити щось, на порожньому зображенні, необхідно визначити колір, за допомогою якого ми будемо відображати різні фігури, текст і т. д. Для цього використовується функція imagecolorallocate($im,$red,$green,$blue), яка створює кольору для зображень. При цьому повертає ідентифікатор кольору у відповідності з заданими RGB параметрами. Тобто для кожного кольору, який Ви хочете визначити, необхідно викликати цю функцію. Параметрами необхідно передавати такі значення:

$im – дискриптор відкритого зображення;

$red – Значення червоного компонента кольору;

$green — Значення зеленого компонента кольору.

$blue — Значення синього компоненту кольору.

Тепер давайте визначимо кілька кольорів:

$white = imagecolorallocate($img,255,255,255);
$red = imagecolorallocate($img,255,0,0);
$green = imagecolorallocate($img,0,255,0);
$blue = imagecolorallocate($img,0,0,255);

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

imagefilledrectangle($img,0,0,300,300,$blue);

Функція imagefilledrectangle() – малює зафарбований прямокутник, на обраному зображенні. Параметри, які необхідно передати:

$img – дискриптор відкритого зображення;

0 — X-координата лівої верхньої точки (як Ви знаєте що б відобразити прямокутник, досить знати координати двох точок: лівої верхньої і правої нижньої);

0 — Y-координати лівої верхньої точки;

300 — X-координата правої нижньої точки;

300 — Y-координата лівого верхнього;

$blue – колір заливки.

Давайте перейдемо в браузер і подивимося, що у нас вийшло:

Далі, давайте навчимося малювати кола і дуги. Для цього використовуємо функцію imagefilledarc():

imagearc($img,150,150,300,300,0,360,$white);

Параметри, які необхідно передати даної функції:

$img – дискриптор відкритого зображення;

150 – X-координата центру;

150 – Y-координата центра;

300 – ширина кола або дуги;

300 – висота кола або дуги;

0 — кут початку дуги в градусах. Окружність або дуга малюється шляхом обертання починаючи з заданої позиції. 0 – відповідає положення на 3 години.

360 — кут закінчення дуги в градусах.

Давайте перейдемо в браузер і подивимося, що у нас вийшло:

Ось ми з Вами отримали окружність. Тепер давайте ще додамо кілька кіл і дуг:

imagearc($img,100,100,50,50,0,360,$white);
imagearc($img,200,100,50,50,0,360,$white);
imagearc($img,150,200,150,100,25,155,$white);

Тепер на екрані ми побачимо смайлик:

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

$string = “World”;
imagechar($img,5,150,200,$string,$white);
imagecharup($img,5,150,200,$string,$white);

Функції imagechar() і imagecharup(), аналогічні по своїй роботі, тільки imagechar() – виводить символ по горизонталі, а imagecharup() – по вертикалі. Параметри, які необхідно передати даними функцій:

$img – дискриптор відкритого зображення;

5 – розмір шрифту (може приймати значення від 1 до 5, або більшого значення, але при цьому необхідно буде зареєструвати шрифт за допомогою функції imageloadfont());

150 – Х-координата початку малювання;

200 — Y-координата початку малювання;

$string – рядок, перший символ якій буде зображено на екрані;

$white – колір.

Тепер давайте подивимося, яким чином можна спотворити зображення. Для цього ми використовуємо наступний код:

$arr = array(array(1,2,1),array(-1,1,1),array(0,0,-1));
imageconvolution($img,$arr,5,200);

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

$img – дискриптор відкритого зображення;

$arr – так звана матриця 3×3 – це звичайний масив, в якому міститься три клітинки, і в кожній з них міститься ще масив, що складається з трьох значенні. Змінюючи параметри даного масиву ми змінюємо спотворення зображення;

5 — дільник викривлення результату, використовується для нормалізації;

200 – зсув кольору. Від 0 до 255 (0 самий темний, 255 – самий світлий).

Тепер давайте подивимося, як застосування останньої функції, вплине на зображення:

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

$points = array(
40,50,
20,240,
60,60,
240,20,
50,40,
10,10
);
imagefilledpolygon($img,$points,6,$white);

Параметри, які необхідно передати даної функції:

$img – дискриптор відкритого зображення;

$points – масив, що містить x і y координати послідовних вершин многокутника;

6 – кількість вершин багатокутника;

$white – колір заливки.

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

Ось ми з Вами зобразили багатокутник. Тепер давайте намалюємо просту лінію. Для цього використовуємо функцію imageline():

imageline($img,80,80,180,180,$white);

Функція imageline() – малює пряму лінію. Параметри, які необхідно передати:

$img – дискриптор відкритого зображення;

80 – Х-координата першої точки;

80 – У-координата першої точки;

180 — Х-координати другої точки;

180 — У-координати другої точки;

$white – колір.

Давайте перейдемо в браузер і подивимося, що вийшло:

Як Ви бачите лінія успішно намальована.

Копіювання зображень

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

imagecopy($img,$im1,100,200,180,0,200,100);

Параметри, які необхідно передати даної функції:

$img — дискриптор зображення, на яке виконується копіювання (приймач);

$im1 — дискриптор копіюється зображення (джерело);

100 — Х-координата на зображенні приймачі, куди буде скопійоване зображення джерело;

200 — У-координата на зображенні приймачі, куди буде скопійоване зображення джерело;

180 — Х-координата точки на копійованому зображенні, з якої буде виконано копіювання (у нашому випадку скопіюємо тільки частина зображення);

0 — У-координата точки на копійованому зображенні, з якої буде виконано копіювання (у нашому випадку скопіюємо тільки частина зображення);

200 — ширина частини копіюється зображення, яку необхідно скопіювати (в нашому випадку скопіюємо частину зображення починаючи з 180 пікселів по осі Х та візьмемо частину шириною 200 пікселів);

100 — висота частини копіюється зображення, яку необхідно скопіювати (в нашому випадку скопіюємо частину зображення починаючи з 0 пікселів по осі У і візьмемо частину висотою 100 пікселів).

Тепер давайте перейдемо в браузер і подивимося, що у нас вийшло:

Як Ви бачите ми скопіювали частину зображення. Тепер давайте не просто скопіювати зображення, а як би накладемо одне на інше. Для цього ми використовуємо функцію — imagecopymerge(), яка виконує копіювання зображення, або лише його частини, з накладенням. У своїй роботі ця функція повністю аналогічна попередньої функції, і відрізняється тільки тим, що вона приймає один параметр більше (pct). Який відповідає за накладання одного зображення на інше, і може змінюватись від 0 до 100. Коли pct = 0, накладання не відбувається. У разі значення 100 ця функція веде себе аналогічно функції imagecopy(). Давайте викличемо дану функцію:

imagecopymerge($img,$im1,100,200,180,0,200,100,50);

Задамо ступінь накладення 50% і давайте подивимося, що вийшло:

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

І остання функція, яку ми з вами розглянемо в цьому розділі — це функція imagecopyresampled(), яка виконує копіювання зображень з масштабуванням. Тому давайте викличемо дану функцію:

imagecopyresampled($img,$im1,10,10,0,0,210,150,$width,$height);

Параметри, які необхідно передати даної функції:

$img — дискриптор зображення, на яке виконується копіювання (приймач);

$im1 — дискриптор копіюється зображення (джерело);

10 — Х-координата на зображенні приймачі, куди буде скопійоване зображення джерело;

10 — У-координата на зображенні приймачі, куди буде скопійоване зображення джерело;

0 — Х-координата точки на копійованому зображенні, з якої буде виконано копіювання (у нашому випадку скопіюємо тільки частина зображення);

210 — ширина блоку на зображенні приймачі, який буде вміщено копируемое зображення;

150 — висота блоку на зображенні приймачі, який буде вміщено копируемое зображення;

$width — ширина частини копіюється зображення, яку необхідно скопіювати (в нашому випадку скопіюємо всі зображення);

$height — висота частини копіюється зображення, яку необхідно скопіювати (в нашому випадку скопіюємо всі зображення).

Тепер давайте перейдемо в браузер і подивимося, що у нас вийшло:

Нанесення тексту на зображення

Для нанесення тексту на зображення, використовуємо функцію imagettftext(), яка малює текст на зображенні шрифт TrueType. Для даного уроку я підготував два TrueType шрифтів і скопіював їх в папку fonts. Тепер давайте викличемо дану функцію:

$font = “fonts/georgia.ttf”;
imagettftext($img,20,90,150,180,$white,$font,”TEXT!!!”);

Параметри, які необхідно передати даної функції:

$img — дискриптор відкритого зображення;

20 — розмір шрифту;

90 — кут повороту тексту;

150 — Х-координата відправної точки для першого символу тексту (конкретно, лівий нижній кут символу);

180 — У-координата. Це позиція базової лінії шрифту;

$white — колір тексту;

$font — шлях до папки з шрифтом

«TEXT!!!» — текст, що необхідно відобразити.

Тепер давайте перейдемо в браузер і подивимося, що у нас вийшло:

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

Всього Вам доброго і вдалого кодування! І побачимося в наступних уроках!!!