Основы работы с библиотекой GD

Дата публикации: 2013-11-18

От автора: очень часто при разработке скриптов необходимо работать с изображениями, используя язык 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, который будет выводить на экран изображение, со следующим содержимым:

<?php

header("Content-Type:text/html;charset='utf-8'");

?>
<img src="image.php"/>

<?php

header("Content-Type:text/html;charset='utf-8'");

Здесь, мы определяем кодировку, путем отправки заголовка браузеру и выводим изображение при помощи тега img. Далее создаем файл index.php и начинаем писать код. Итак, как в любом графическом редакторе, перед тем как создать изображение, необходимо создать пустой лист, или пустое изображение. Непосредственно на котором, мы будем создавать нужное нам изображение. Библиотека GD не исключение, поэтому первым делом создадим пустое изображение:

$img = imagecreatetruecolor(300,300);

1	$img = imagecreatetruecolor(300,300);

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

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

1 2	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);

$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);

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

Думаю, Вы уже догадались, что функция imagesx() – возвращает ширину выбранного изображения в пикселях. А функция imagesу() – высоту. Обеим функциям необходимо передать параметром дискриптор открытого изображения. Перед тем, как изобразить что то, на пустом изображении, необходимо определить цвет, при помощи которого мы будем отображать различные фигуры, текст и т.д. Для этого используется функция 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);

$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);

1	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);

1	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);

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);

$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);

1 2	$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);

$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);

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

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

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

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

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

180 — Х-координата второй точки;

180 — У-координата второй точки;

$white – цвет.

Давайте перейдем в браузер и посмотрим, что получилось:

Как Вы видите линия успешно нарисована.

Копирование изображений

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

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

1	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);

1	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);

1	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!!!");

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

Параметры которые необходимо передать данной функции:

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

20 — размер шрифта;

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

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

180 — У-координата. Это позиция базовой линии шрифта;

$white — цвет текста;

$font — путь к папке с шрифтом

«TEXT!!!» — текст, которые необходимо отобразить.

Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:

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

Всего Вам доброго, удачного кодирования! И увидимся в следующих уроках!!!

Метки: библиотека GD