Инструменты для Бизнеса

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