Всякому web-программисту приходится работать с изображениями – чисто текстовых сайтов в интернете немного. Самый простой способ поместить на страницу картинку – сохранить ее в файле и поставить в HTML-файле соответствующий тэг. Один из недостатков этого способа очевиден: картинки, которые лежат в файле никак не меняются, чтобы пользователь увидел другое изображение, вебмастеру нужно открыть графический редактор, внести измения и сохранить их. В этой статье я расскажу о создании динамических изображений с помощью языка web-программирования PHP.
Для начала – несколько слов для тех, кто не знаком с PHP. Это – язык сценариев, выполняющихся на стороне сервера для создания динамических web-страниц. Программа на PHP, подобно тексту на JavaScript, VBScript или ASP, вставляется в HTML-файл или сохраняется в отдельном файле с соответствующим расширением. Начало и конец программы отмечаются специальными тэгами <? и ?>. Текст вне этих скобок PHP не интерпретирует, он передается web-браузеру «как есть». Синтаксис PHP довольно подробно описан в руководстве, которое входит в комплект поставки (его также можно взять на сайте http://www.php.net).
Принцип работы с изображениями такой: PHP-программа (а точнее PHP-интерпретатор, работающий на стороне сервера) создает картинку «на лету» и передает ее браузеру в нужном графическом формате.
Для того чтобы воспользоваться возможностями PHP по работе с изображениями, необходимо установить в системе библиотеку GD. Если вы работаете с Linux, то эта библиотека уже должна быть установлена. Если нет – ее можно найти по адресу http://www.boutell.com/gd. Если вы работаете с Windows, то лучше всего посетить http://php.weblogs.com/easywindows. Здесь можно скачать библиотеку php_gd, которая позволит вам насладиться всеми прелестями работы с графикой на PHP. Если вы планируете использовать в своих изображениях шрифты TrueType, вам понадобится библиотека FreeType (http://www.freetype.org).
Несколько слов о поддерживаемых библиотекой GD графических форматах. Версии старше 1.6 поддерживают форматы GIF и JPEG. Более новые версии позволяют работать с JPEG и PNG. Начиная с версии 1.6 формат GIF в GD не поддерживается. Это связанно с тем, что всеми правами на алгоритм LZW-компрессии, использующийся в этом формате, обладает компания Unisys.
Первые шаги
Итак, система настроена, все необходимые библиотеки установлены. Для начала создадим какое-нибудь простое изображение:
<?
Header("Content-Type: image/gif");
$image = ImageCreate(500, 75);
$blue = ImagecolorAllocate($image, 0, 0, 255);
ImageFill($image, 1, 1, $blue);
ImageGIF($image);
ImageDestroy($image);
?>
Сохраните текст в файле с расширением .php и просмотрите его с помощью браузера. Если вы все сделали правильно, то вы увидите то, что показано на рисунке 1.
рисунок 1
Рассмотрим код нашего скрипта более подробно. В первой строчке скрипт сообщает браузеру информацию о типе передаваемых данных с помощью HTTP-заголовка. В нашем примере используется предопределенный тип «image/gif», который означает, что далее последует изображение в формате GIF. Передавать браузеру соответствующий заголовок необходимо всегда. Для форматов JPEG и PNG первая строчка выглядела иначе:
Header(“Content-Type: image/jpeg”);
Header(“Content-Type: image/png”);
Обратите внимание, что заголовок “Content-Type” передается для каждой страницы только один раз, поэтому PHP-код для генерации изображения необходимо помещать в отдельный файл. Кстати, размещение динамической графики вместе с HTML-кодом возможно только при использовании механизма SSI (Server Side Includes), о чем мы поговорим чуть позже.
Создание графики в PHP состоит из четыре этапов:
-
создание дескриптора изображения;
-
регистрация используемых цветов;
-
рисование с использованием предопределенных функций;
-
и финальная стадия – создание изображения и передача его браузеру.
В нашем примере первый этап выглядит так:
$image = ImageCreate(500, 75);
Здесь функция ImageCreate() создает дескриптор изображения и присваивается его переменной $image. Функция вызывается с двумя параметрами – высотой и шириной изображения. По умолчанию изображение заливается черным цветом. Следующий этап – цвета:
$blue = ImagecolorAllocate($image, 0, 0, 255);
Все используемые в изображении цвета необходимо регистрировать. Для этого используется функция ImageColorAllocate(); ее параметры – дескриптор изображения и RGB-кодировка цвета. Каждый цвет ставится в соответствие переменной, в дальнейшем эта переменная передается функциям рисования.
Вряд ли стоит перечислять все функции рисования. Скажу лишь, что их немало: вы можете «заливать» изображения цветом, рисовать различные фигуры, делать рисунок прозрачным и т.д. Рассмотрим некоторые из них на практике, а об остальных вы сможете узнать из документации.
В нашем первом примере мы «заливаем» изображение синим цветом с помощью функции
ImageFill:
ImageFill($image, 1, 1, $blue);
Второй и третий параметр – координаты начала заливки. Начало координат располагается в левом верхнем углу изображения. Таким образом, координаты (500, 75) определяют правый нижний угол изображения из первого примера.
Теперь следует передать готовый рисунок браузеру. Это делает функция ImageGIF(), ее единственный параметр – дескриптор изображения. Для форматов JPEG и PNG применяйте функции ImageJPEG() и ImagePNG() соответственно. Для освобождения памяти, выделенной под рисунок, в конце скрипта надо вызвать функцию ImageDestroy().
Использование текста в рисунках
Рассмотрим еще одну возможность: попробуем что-нибудь написать на рисунке. Я приведу небольшой пример, а потом поясню механизм работы с текстом:
<?
// передаем заголовок
Header("Content-Type: image/gif");
// создаем дескриптор изображения и регистрируем цвета
$image = ImageCreate(500, 75);
$black = ImageColorAllocate($image, 0, 0, 0);
$yellow = ImageColorAllocate($image, 255, 255, 0);
// выполняем "заливку" рисунка
ImageFill($image, 0, 0, $black);
// помещаем на изображение текст в координаты (210, 30)
itring($image, 4, 210, 30, "Hello World!", $yellow);
ImageGIF($image);
ImageDestroy($image);
?>
Результат выполнения скрипта показан на рисунке 2.
рисунок 2
Собственно выводом текста занимается функция itrings(). Ее параметры – дескриптор изображения, номер шрифта, координаты точки вывода изображения, строка текста и цвет. Можно использовать один из пяти предопределенных шрифтов фиксированного размера. Они нумеруются от 1 (самый маленький) до 5 (самый большой).
В следующем примере начинается самое интересное: изображение создается динамически на основе вводимых пользователем данных. Создадим простой HTML-файл с формой (рисунок 3).
рисунок 3
Вот его код:
<html>
<body>
<form action="example3.php" method="get">
Введите Ваше имя:<input type=text name=name><br>
<input type=submit>
</form>
</body>
</html>
А теперь создадим такой файл example3.php:
<?
Header("Content-Type: image/gif");
if ($name)
{
$string = "Hello " . $name;
}
else
{
$string = "Hello All!";
}
$image = ImageCreate(500, 75);
$black = ImageColorAllocate($image, 0, 0, 0);
$yellow = ImageColorAllocate($image, 255, 255, 0);
ImageFill($image, 0, 0, $black);
itring($image, 4, 210, 30, $string, $yellow);
ImageGIF($image);
ImageDestroy($image);
?>
Изображение будет содержать введенный текст (рисунок 4).
рисунок 4
Скажу пару слов и о других функциях из библиотеки GD, предназначенных для работы с текстом. itringUp() выводит текст вертикально; ImageChar() и ImageCharUp() выводят один символ; ImageFontHeight() и ImageFontWidth() возвращают высоту и ширину шрифта. Последние две функции используются в следующем примере, в котором строка текста подчеркивается линией (функция ImageLine рисует линии по заданным координатам):
<?
Header("Content-Type: image/gif");
if ($name)
{
$string = "Hello " . $name;
}
else
{
$string = "Hello All!";
}
$image = ImageCreate(500, 75);
$black = ImageColorAllocate($image, 0, 0, 0);
$yellow = ImageColorAllocate($image, 255, 255, 0);
ImageFill($image, 0, 0, $black);
itring($image, 4, 210, 30, $string, $yellow);
// определяем ширину шрифта
$font_width = ImageFontWidth(4);
// вычисляем ширину строки введенного текста
$string_width = $font_width * (strlen($string));
// рисуем линию с началом в точке с координатами (210,50)
ImageLine($image, 210, 50, (210+$string_width), 50, $yellow);
ImageGIF($image);
ImageDestroy($image);
?>
Результат работы скрипта показан на рисунке 5.
рисунок 5
Что еще можно рисовать?
Естественно, кроме линий с помощью GD можно рисовать и другие фигуры. В следующем примере мы воспользуемся функцией ImageFilledRectangle() для того, чтобы вывести в окне браузера французский флаг. Функция предназначена для рисования заполненных определенным цветом прямоугольников. Для начала «зальем» весь рисунок белым цветом, а затем нарисуем красный и синий прямоугольники:
<?
// заголовок
Header("Content-Type: image/gif");
$image = ImageCreate(300, 300);
// регистрируем цвета
$red = ImageColorAllocate($image, 255, 0, 0);
$white = ImageColorAllocate($image, 255, 255, 255);
$blue = ImageColorAllocate($image, 0, 0, 255);
// выполняем "заливку" рисунка
ImageFill($image, 0, 0, $white);
// рисуем прямоугольники
ImageFilledRectangle($image, 0, 0, 100, 300, $blue);
ImageFilledRectangle($image, 200, 0, 300, 300, $red);
// передаем броузеру на клиентском компьютере
ImageGIF($image);
ImageDestroy($image);
?>
На рисунке 6 можно видеть результат наших трудов.
рисунок 6
PHP позволяет рисовать и другие типы многоугольников. Для этого имеется функция ImagePolygon(). Следующий пример выводит на экран пятиугольник. В качестве параметров (кроме дескриптора изображения и цвета линии) этой функции передается следующая информация: количество вершин (в нашем случае – пять) и массив координат точек, являющихся вершинами. Результат работы скрипта представлен на рисунке 7.
<?
Header("Content-Type: image/gif");
$image = ImageCreate(300, 300);
$green = ImageColorAllocate($image, 0, 255, 0);
$white = ImageColorAllocate($image, 255, 255, 255);
$blue = ImageColorAllocate($image, 0, 0, 255);
// массив вершин многоугольника
$vertices = Array(150, 10, 250, 100, 250, 200, 50, 200, 50, 100);
ImageFill($image, 0, 0, $white);
// рисуем многоугольник
ImagePolygon($image, $vertices, 5, $blue);
// выполняем заливку многоугольника зеленым цветом (до синей границы)
ImageFillToBorder($image, 150, 150, $blue, $green);
ImageGIF($image);
ImageDestroy($image);
?>
рисунок 7
В этом же скрипте используется еще одна функция, не упоминавшаяся ранее – ImageFillToBorder(). Она используется для заливки области, ограниченной определенным цветом (в нашем случае это синяя линия многоугольника).
Функция ImageArc() умеет рисовать дуги и окружности. Приведу небольшой пример (см. рисунок 8):
<?
Header("Content-Type: image/gif");
$image = ImageCreate(300, 300);
$white = ImageColorAllocate($image, 255, 255, 255);
$black = ImageColorAllocate($image, 0, 0, 0);
// переменные для окружности:
// центр окружности
$center_x = 150;
$center_y = 150;
// высота и ширина
$width = 150;
$height = 150;
// начальный и конечный углы
$start = 0;
$end = 360;
ImageFill($image, 0, 0, $white);
// рисуем окружность
ImageArc($image, $center_x, $center_y, $width, $height, $start, $end, $black);
ImageGIF($image);
ImageDestroy($image);
?>
рисунок 8
Меняя значения переменных $width и $height, можно рисовать овалы, а меняя углы – добиться отображения различного рода дуг.
Использование готовых изображений
Библиотека GD позволяет не только рисовать картинки, но и пользоваться уже готовыми. Рассмотрим вполне реальную ситуацию: штатный дизайнер вашей фирмы разработал внешний вид кнопок для некоторого сайта, а вам надо поместить на странице несколько одинаковых по дизайну кнопок и подписи к ним.
В состав библиотеки GD входят такие функции, как ImageCreateFromGIF(), ImageCreateFromJPEG() и ImageCreateFromPNG(). Они помогут в тех случаях, когда надо создать новое изображение на основе уже существующего. Пусть у нас имеется файл button.gif (рисунок 9), который содержит гениальный дизайн кнопки для сайта. Ниже приводится PHP-код, который делает готовые кнопки на основе этого файла. Обратите внимание на то, как размеры кнопки, шрифта, и строк текста используются для вычисления координат размещения заголовков. Здесь в качестве подписи к кнопке берется значение переменной $caption, которая передается в скрипт извне:
<?
// файл button.php – помещение текста на рисунок.
// входные параметры:
// $caption - текст, размещаемый посередине рисунка
Header("Content-Type: image/gif");
// создаем изображение на основе существующего файла
$image = ImageCreateFromGIF("button.gif");
//регистрируем цвет
$white = ImageColorAllocate($image, 255, 255, 255);
// определяем размеры шрифта
$font_height = ImageFontHeight(3);
$font_width = ImageFontWidth(3);
// определяем размер рисунка
$image_height = iY($image);
$image_width = iX($image);
// получаем длину строки
$length = $font_width * strlen($caption);
// вычисляем начальные координаты для заголовка
$image_center_x = ($image_width/2)-($length/2);
$image_center_y = ($image_height/2)-($font_height/2);
// пишем текст
itring($image, 3, $image_center_x, $image_center_y, $caption, $white);
ImageGIF($image);
ImageDestroy($image);
?>
рисунок 9
Функции iX() и iY() возвращают, соответственно, ширину и высоту изображения. Также существует функция Getiize(), с помощью которой можно определить размеры и тип изображения.
Сам по себе приведенный выше скрипт большой практической ценности не имеет, но его можно использовать в любой HTML-странице посредством SSI или так, как описано в следующем коде:
<?
// данные для элементов меню:
// обычно такая информация получается из базы данных
// в данном примере массивы используются исключительно для простоты
$menu_items = Array();
$menu_items[0] = "News";
$menu_items[1] = "Documentation";
$menu_items[2] = "FAQ";
$menu_items[3] = "GuestBook";
$menu_items[4] = "Forum";
$menu_items[5] = "Send message";
?>
<html>
<body>
<center><h2>Make your choice!</h2></center>
<table border=0>
<?
// в цикле обрабатываем все элементы массива
foreach($menu_items as $caption)
{
// для каждого элемента выводим кнопку в отдельной строке таблицы
?>
<tr><td>
<a href="#"><img src="button.php?caption=<? echo $caption; ?>"
border=0></a>
</td></tr>
<?
}
?>
</table>
</body>
</html>
рисунок 10
Результат работы этого скрипта можно увидеть на рисунке 10. Единственное, на что хочу обратить ваше внимание – способ вызова кода для формирования изображения. Взгляните на следующую конструкцию:
<img src="button.php?caption=<? echo $caption; ?>"
Здесь в качестве параметра src тега img используется результат выполнения скрипта button.php, вызванного на выполнение с соответствующим значением параметра $caption.
Работаем с диаграммами
Теперь вы уже достаточно много знаете о возможностях библиотеки GD, поэтому в завершение нашего разговора я предлагаю создать какое-нибудь реальное приложение. Пример будет весьма жизненным – рисование диаграммы. В подавляющем большинстве случаев данные, которые отображает диаграммы, изменяются динамически (например, результаты голосования), поэтому PHP-скрипт здесь очень кстати. В примере мы рассмотрим создание разноцветной круговой диаграммы на основе вводимых пользователем данных.
Для начала создадим HTML-файл, с формой, в которую пользователь будет вводить информацию, необходимую для формирования диаграммы. В нашем случае нужно просто ввести пять чисел. Вот HTML-код:
<html>
<body>
<h3>Создаем круговую диаграмму</h3>
<table>
<form action="pie.php" method=get>
<tr>
<td>Число №1</td>
<td><input type=text name=slice[1] value=0></td>
</tr>
<tr>
<td>Число №2</td>
<td><input type=text name=slice[2] value=0></td>
</tr>
<tr>
<td>Число №3</td>
<td><input type=text name=slice[3] value=0></td>
</tr>
<tr>
<td>Число №4</td>
<td><input type=text name=slice[4] value=0></td>
</tr>
<tr>
<td>Число №5</td>
<td><input type=text name=slice[5] value=0></td>
</tr>
<tr>
<td colspan=2 align=center><input type=submit value="Показать диаграмму!"></td>
</tr>
</form>
</table>
После нажатия кнопки «Показать диаграмму» введенные данные передаются скрипту pie.php.
В скрипте все пять чисел суммируются. Затем считается, сколько процентов составляет каждое значение от всей суммы. Далее вычисляются углы дуг для каждой из «долек» и происходит, собственно, рисование дуг. Потом каждый сегмент заливается своим цветом. Для этого нужны координаты точки, находящейся внутри сегмента. В завершение над диаграммой помещается заголовок. Вот текст скрипта:
<?
// начнем с инициализации переменных
$sum = 0;
$degrees = Array();
$diameter = 200;
$radius = $diameter/2;
$center_x = 150;
$center_y = 150;
// в цикле вычисляем сумму введенных чисел
for ($x=1; $x<=5; $x++)
{
$sum += $slice[$x];
}
// преобразуем каждое значение в соответствующий процент от 360 градусов
for ($y=1; $y<=5; $y++)
{
$degrees[$y] = ($slice[$y]/$sum) * 360;
}
// создаем дескриптор изображения и инициализируем цвета
Header("Content-Type: image/gif");
$image = ImageCreate(300, 300);
$red = ImageColorAllocate($image, 255, 0, 0);
$blue = ImageColorAllocate($image, 0, 0, 255);
$green = ImageColorAllocate($image, 0, 255, 0);
$yellow = ImageColorAllocate($image, 255, 255, 0);
$black = ImageColorAllocate($image, 0, 0, 0);
$white = ImageColorAllocate($image, 255, 255, 255);
// первоначально зальем рисунок белым цветом
ImageFill($image, 0, 0, $white);
for ($z=1; $z<=5; $z++)
{
// в цикле вычисляем угол каждого сегмента и рисуем "дольки"
ImageArc($image, 150, 150, $diameter, $diameter, $last_angle,($last_angle+$degrees[$z]), $black);
$last_angle = $last_angle+$degrees[$z];
// вычисляем конечную точку каждой дуги
// следует помнить, что функции cos() и sin() возвращают значения
// в радианах, которые должны быть преобразованы обратно в градусы
$end_x = round(150 + ($radius * cos($last_angle*pi()/180)));
$end_y = round(150 + ($radius * sin($last_angle*pi()/180)));
// разделяем сегменты черной линией
ImageLine($image, 150, 150, $end_x, $end_y, $black);
}
// теперь определим точки внутри сегментов для того,
// чтобы мы могли выполнить их заливку
$prev_angle = 0;
$pointer = 0;
for ($z=1; $z<=5; $z++)
{
$pointer = $prev_angle + $degrees[$z];
$this_angle = ($prev_angle + $pointer) / 2;
$prev_angle = $pointer;
$end_x = round(150 + ($radius * cos($this_angle*pi()/180)));
$end_y = round(150 + ($radius * sin($this_angle*pi()/180)));
$mid_x = round((150+($end_x))/2);
$mid_y = round((150+($end_y))/2);
// в зависимости от порядкового номера сектор
// выбираем тот или иной цвет
if ($z == 1)
{
ImageFillToBorder($image, $mid_x, $mid_y, $black, $red);
}
else if ($z == 2)
{
ImageFillToBorder($image, $mid_x, $mid_y, $black, $blue);
}
else if ($z == 3)
{
ImageFillToBorder($image, $mid_x, $mid_y, $black, $green);
}
else if ($z == 4)
{
ImageFillToBorder($image, $mid_x, $mid_y, $black, $yellow);
}
else if ($z == 5)
{
ImageFillToBorder($image, $mid_x, $mid_y, $black, $black);
}
}
// выводим заголовок
itring($image, 5, 100, 10, "Pie Chart", $black);
ImageGIF($image);
ImageDestroy($image);
?>
рисунок 11
рисунок 12
На рисунке 11 показан пример заполнения формы, а на рисунке 12 – результат работы скрипта, соответствующий введенным данным.
Еще несколько полезных функций
В заключение я упомяну еще несколько функций, которые могут быть полезны при изучении принципов работы с графикой в PHP.
-
ImageColorTransparent(). Принимает два аргумента – идентификатор изображения и цвет из палитры RGB (переменная PHP). Изображение заливается прозрачным цветом, указанным в переменной (второй аргумент). Функция применима только к GIF-изображениям.
-
ImageTTFText(). Прорисовывает текст с помощью TrueType шрифтов, которые разработчик может самостоятельно подключить. Второй аргумент указывает размер шрифта, третий – угол наклона будущего текста относительно горизонтали. 4-й и 5-й аргументы предназначены для указания координат начала текста (точнее, левого нижнего угла первой буквы текста) Обратите внимане: в функции itring все наоборот, там указываются координаты верхнего правого угла первой буквы текста. Далее идут цвет текста, шрифт (путь к файлу шрифта) и собственно текст.
-
ImageColorAt(). Возвращает цвет определенного пикселя в RGB-формате.
-
ImageColorExact(). Возвращает значение определенного (в переменной) цвета в RGB-формате.
-
ImageColorsTotal(). Возвращает общее количество цветов в палитре.
-
ietPixel(). Подсвечивает точку с указанными координатами указанным цветом.
На этом я закончу. Естественно, в рамках одной статьи невозможно рассмотреть все возможности работы с изображениями, предоставляемые языком PHP (точнее библиотекой GD), однако я надеюсь, что заинтересовал вас, и вы продолжите изучение этой темы. |