Веб-мастерам часто бывает необходимо динамически создавать и/или изменять рисунки на своих страницах. Это требуется в тех случаях, когда изображения несут не исключительно декоративную функцию, а содержат некую полезную информацию. И если веб-мастер знаком с основами PHP, решение этой задачи становится более чем тривиальным. Для этого достаточно подключить модуль расширения GD. Андрей Гончаренко
Загрузить модуль GD можно по адресу . Для его подключения необходимо убрать знак комментария в строке extension=php_gd.dll (для сервера с ОС Windows; в случае Unix-систем расширение файла может быть другим) в php.ini и перезапустить веб-сервер. Различные версии GD могут работать с разными форматами графических файлов. Так, при использовании библиотеки версии 1.6 и ниже можно создавать изображения в форматах JPEG, GIF и SWF, но не PNG. Более новые версии позволяют использовать PNG, но отказываются поддерживать формат GIF из лицензионных соображений. Все приведенные ниже примеры будут работать при использовании GD версии 2.0.1 или выше.
Создание графического счетчика посещений
Важная особенность работы с модулем GD заключается в том, что скрипт, формирующий новый рисунок, не должен выводить что-либо кроме самого рисунка (то есть в нем не должно быть вызовов echo, printf и подобных им функций). Впоследствии изображение, сформированное PHP-скриптом, выводится браузером методом указания URL этого скрипта в качестве источника данных, например, <img src="pic.php">.
Создание нового рисунка в PHP начинается либо с создания новой чистой "страницы" (canvas) для рисования, либо с загрузки и модификации уже существующего изображения. Но перед тем как начать процесс вывода графической информации, необходимо выбрать его формат (тип MIME) посредством вызова функции header(str). Например, для формата PNG необходимо использовать следующий код:
header("Content-type: image/png");
Далее для создания области для рисования необходимо вызвать функцию int imagecreate (int x_size, int y_size), которой передать в качестве параметров x_size и y_size, соответственно, ширину и высоту (в пикселах) формируемой картинки; при этом функция вернет идентификатор созданной области для рисования. Если же мы хотим взять за основу уже имеющуюся картинку, то, в зависимости от ее формата, нужно вызвать функцию imagepng, или imagejpeg, или imagegif, передав в качестве параметра имя файла-картинки. Для вывода текста существует функция int imagestring(int im, int font, int x, int y, string s, int col), которой нужно передать: идентификатор области рисования, размер шрифта (1-5), координату X начала текста, координату Y начала текста, сам текст и цвет текста соответственно. Для определения цвета используется конструкция вида
$white=ImageColorAllocate($im, 255, 255, 255)
Последние три числовых параметра - RGB-составляющие требуемого цвета. Но поскольку каждый раз указывать их несколько нерационально, следует создать include-файл с определениями основных цветов colors.inc:
После того как мы нарисовали средствами GD нашу картинку, ее необходимо вывести в браузер. Для этого в зависимости от формата рисунка необходимо вызвать одну из функций: imagepng(int im [, string filename]) или imagejpeg (int im [, string filename [, int quality]]), - передав ей в качестве параметра идентификатор картинки. Если кроме идентификатора области рисования указать имя файла, то изображение будет сохранено на диске под этим именем). После того как мы завершили работу с рисунком, необходимо освободить занимаемую им память. Для этого служит функция imagedestroy (int im). Рассмотрим работу с этими функциями на примере.
Для начала создадим шаблоны заголовка и "подвала" HTML-документа, которые будем использовать для того, чтобы не засорять PHP-код конструкциями HTML:
header.tpl:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//RU"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Работа с графикой в php</title> </head> <body>
footer.tpl:
</body> </html>
Допустим, мы хотим создать графический счетчик посещений и у нас есть файл-заготовка, в который нужно "дописать" количества посещений. Он может выглядеть так.
Тогда скрипт, который помещает в заготовку счетчика данные о посещениях, может выглядеть следующим образом (сам подсчет посещений опущен):
counter.php:
<?php header("Content-type: image/png"); $im =ImageCreateFromPNG("counter.png"); include "colors.inc"; //определяем размер шрифта для вывода текста $fontSize=1; //задаем координаты для вывода первой строки $x1=40; $y1=22; //задаем координаты для вывода второй строки $x2=49; $y2=33; //пишем количество посетителей всего ImageString($im, $fontSize, $x1, $y1, "1 000 000", $blue); //пишем количество посетителей сегодня ImageString($im, $fontSize, $x2, $y2, "10", $blue); //выводим картинку ImagePNG($im); //освобождаем занимаемую рисунком память imagedestroy($im); ?>
Скрипт для отображения счетчика может быть таким:
<?php include "header.tpl"; echo "<center><img src=\"counter.php\"></center>"; include "footer.tpl"; ?>
Как видите, в использовании GD нет ничего сложного.
Создание линейного графика средствами библиотеки GD
Для создания линейного графика нам следует познакомиться еще с несколькими полезными функциями библиотеки GD. В первую очередь нам понадобятся инструменты для рисования линий. Для этого существует функция imageline (int im, int x1, int y1, int x2, int y2, int col), которой в качестве параметров нужно передать идентификатор созданной уже области рисования, координаты начальной и конечной точек, а также цвет линии. Для графика, нам понадобятся координатные оси, которые заканчиваются стрелками. Для их отрисовки понадобится еще одна функция, создающая замкнутый многоугольник произвольной формы. Она имеет следующий формат вызова: imagefilledpolygon(int im, array points, int num_points, int col), где im - идентификатор области рисования, points - массив, содержащий координаты точек многоугольника (arr[0]=x0; arr[1]=y0; arr[2]=x1; и т. д.), num_points - количество точек полигона, col - цвет заполнения. Аналогичная функция - imagepolygon -предназначена для создания незакрашенного многоугольника.
Приступим к написанию скрипта. Создадим новый файл и назовем его line_chart.php. Для начала определим функцию отрисовки осей координат, которой будем передавать ширину и высоту области рисования. Так как мы планируем в дальнейшем выводить подписи значений, откладываемых по осям, то необходимо учесть этот фактор и, соответственно, немного сместить относительно центра точку, обозначающую начало координат. Вот как может выглядеть искомая функция:
<?php function draw_axises($im_width,$im_heignt) { global $im,$black,$l_grey,$x0,$y0,$maxX,$maxY; $x0=25.0; //начало оси координат по X $y0=20.0; //начало оси координат по Y $maxX=$im_width-$x0; //максимальное значение оси //координат по X в пикселах $maxY=$im_heignt-$y0; //максимальное значение оси //координат по Y в пикселах //рисуем ось X imageline($im, $x0, $maxY, $maxX, $maxY, $black); //рисуем ось Y imageline($im, $x0, $y0, $x0, $maxY, $black); //рисуем стрелку на оси X $xArrow[0]=$maxX-6; $xArrow[1]=$maxY-2; $xArrow[2]=$maxX; $xArrow[3]=$maxY; $xArrow[4]=$maxX-6; $xArrow[5]=$maxY+2; imagefilledpolygon($im, $xArrow, 3, $black); //рисуем стрелку на оси Y $yArrow[0]=$x0-2; $yArrow[1]=$y0+6; $yArrow[2]=$x0; $yArrow[3]=$y0; $yArrow[4]=$x0+2; $yArrow[5]=$y0+6; imagefilledpolygon($im, $yArrow, 3, $black); }
Еще одним важным атрибутом графика является координатная сетка. Для ее создания напишем еще одну функцию, которой в качестве параметров будем передавать величину шага в пикселах по осям X и Y и расстояние между линиями сетки для каждой из осей:
function draw_grid($xStep,$yStep,$xCoef,$yCoef) { global $im,$black,$l_grey,$x0,$y0,$maxX,$maxY; $xSteps=($maxX-$x0)/$xStep-1; //определяем количество //шагов по оси X $ySteps=($maxY-$y0)/$yStep-1; //определяем количество //шагов по оси Y //выводим сетку по оси X for($i=1;$i<$xSteps+1;$i++) { imageline($im, $x0+$xStep*$i, $y0, $x0+$xStep*$i, $maxY-1, $l_grey); //при необходимости выводим значения линий сетки //по оси X ImageString($im, 1, ($x0+$xStep*$i)-1, $maxY+2, $i*$xCoef, $black); //выводим сетку по оси Y for($i=1;$i<$ySteps+1;$i++) { imageline($im, $x0+1, $maxY-$yStep*$i, $maxX, $maxY-$yStep*$i, $l_grey); //при необходимости выводим значения линий сетки //по оси Y ImageString($im, 1, 0, ($maxY-$yStep*$i)-3, $i*$yCoef, $black); } } }
Теперь можно приступить к рисованию самого графика. Создаваться изображение будет вызовом отдельной функции, которой передаются массивы координат X и Y, количество элементов в массивах и цвет данного графика. Вот как это можно реализовать:
function draw_data($data_x,$data_y,$points_count,$color) { global $im,$x0,$y0,$maxY,$scaleX,$scaleY; for($i=1;$i<$points_count;$i++) { //рисуем линейный график по точкам из массивов данных imageline($im, $x0+$data_x[$i-1]*$scaleX, $maxY-$data_y[$i-1]*$scaleY, $x0+$data_x[$i]*$scaleX, $maxY-$data_y[$i]*$scaleY,$color); } }
Итак, все подзадачи создания графика решены. Теперь воспользуемся созданными нами функциями для непосредственного формирования изображения:
//создаем рисунок шириной 500 и высотой 400 пикселов $im = @ImageCreate(500, 400); include "colors.inc"; //рисуем оси координат draw_axises(500,400); //задаем массивы данных графиков $x1[0]=1; $y1[0]=1; $x1[1]=2; $y1[1]=4; $x1[2]=3; $y1[2]=8; $x1[3]=4; $y1[3]=16; $x2[0]=1.5; $y2[0]=1; $x2[1]=2.5; $y2[1]=4; $x2[2]=3.5; $y2[2]=8; $x2[3]=4.5; $y2[3]=16; //объединяем данные из массивов данных //для вычисления масштаба $x=array_merge($x1,$x2); $y=array_merge($y1,$y2); //получаем максимальные значения //элементов для каждого массива $maxXVal=max($x); $maxYVal=max($y); //вычисляем масштаб преобразования данных //в координаты рабочей области $scaleX=($maxX-$x0)/$maxXVal; $scaleY=($maxY-$y0)/$maxYVal; //задаем шаг для координатной сетки в пикселах $xStep=30; $yStep=30; //рисуем координатную сетку draw_grid($xStep,$yStep, round($xStep/$scaleX,1), round($yStep/$scaleY,1), true); //рисуем первый график draw_data($x1,$y1,4,$red); //рисуем второй график draw_data($x2,$y2,4,$blue); //выводим рисунок ImagePNG($im); //освобождаем занимаемую рисунком память imagedestroy($im); ?>
Отображение графика в браузере осуществляется точно так же, как и в первом примере:
<?php include "header.tpl"; echo "<center><img src=\"line_chart.php\"></center>"; include "footer.tpl"; ?>
Круговая диаграмма
В случае, если необходимо отобразить процентное соотношение каких-либо параметров, не обойтись без круговой диаграммы. Строить ее совсем не трудно, если знать о существовании функций библиотеки GD imagearc и imagefilledarc, которые рисуют дугу и закрашенную дугу соответственно. В качестве параметров функции imagearc(int im, int cx, int cy, int w, int h, int s, int e, int col) нужно указать: im - идентификатор области рисования; cx, cy - координаты центра дуги; w, h - ширину и высота дуги (для построения сектора круга они должны быть равны); s, e - начальный и конечный углы дуги (в градусах, от 0 до 360) и конечно же col - цвет дуги. Функция imagefilledarc() отличается от предыдущей лишь наличием дополнительного параметра style, который определяет способ заливки сектора. Этот параметр может принимать следующие значения:
IMG_ARC_PIE - обычный способ заливки, получается закрашенный сектор;
IMG_ARC_CHORD (IMG_ARC_CHORD и IMG_ARC_PIE взаимоисключающие параметры) - заливка по хорде, то есть получается закрашенный треугольник;
IMG_ARC_NOFILL - без заливки, получаем просто дугу;
IMG_ARC_EDGED - используется совместно с IMG_ARC_NOFILL и указывает, что конечный и начальный углы дуги должны быть соединены с центром.
Эти параметры можно указывать, используя оператор || (ИЛИ).
Теперь, когда у нас есть все необходимые знания, создадим скрипт круговой диаграммы в новом файле circular_chart.php. Для начала создадим функцию рисования одного сектора круга требуемого цвета с заданным центром, радиусом, начальным и конечным углами:
<?php function drawSegment($x0,$y0,$radius,$begAngle,$endAngle,$color) { global $im,$x0,$y0,$black; //рисуем сектор круга соответствующих размера и цвета imagefilledarc($im, $x0, $y0, $radius*2, $radius*2, $begAngle, $endAngle, $color, IMG_ARC_PIE); //рисуем окантовку черным цветом //для выведенного ранее сектора imagefilledarc($im, $x0, $y0, $radius*2, $radius*2, $begAngle, $endAngle, $black, IMG_ARC_EDGED | IMG_ARC_NOFILL); }
Для обработки данных и построения диаграммы нам не обойтись без соответствующей функции, которой мы будем передавать массив данных, массив цветов, соответствующих каждому элементу массива данных, центр окружности и ее радиус:
function drawDiagram($dataArray,$colors,$x0,$y0,$radius) { global $im,$x0,$y0,$black; //вычисляем количество элементов в массиве данных $count=count($dataArray); //получаем сумму всех элементов массива $sumVal=array_sum($dataArray); //начнем рисовать сектора с угла 0 градусов $begAngle=0; //вычисляем угол для отрисовки первого сектора $endAngle=floor($begAngle+ (($dataArray[1]*100)/$sumVal)*360/100); //рисуем сегмент, соответствующий //величине первого элемента массива drawSegment($x0,$y0,$radius, $begAngle,$endAngle,$colors[1]); //аналогично поступаем с остальными элементами массива, //за исключением последнего for($i=2;$i<$count;$i++) { $begAngle=$endAngle; $endAngle=floor($begAngle+ (($dataArray[$i]*100)/$sumVal)*360/100); drawSegment($x0,$y0,$radius, $begAngle,$endAngle,$colors[$i]); } //рисуем сегмент для последнего элемента массива $begAngle=$endAngle; $endAngle=360; drawSegment($x0,$y0,$radius, $begAngle,$endAngle,$colors[$count]); }
Теперь создадим тестовую диаграмму, используя наши функции:
$im = @ImageCreate (500, 400); include "colors.inc"; // координаты центра окружности диаграммы $x0=200; $y0=200; // радиус диаграммы $radius=100; //заполняем массив данных и цветов для диаграммы $dataArray[1]=2; $colors[1]=$red; $dataArray[2]=6; $colors[2]=$blue; $dataArray[3]=10; $colors[3]=$green; //рисуем диаграмму drawDiagram($dataArray,$colors,$x0,$y0,$radius); ImagePNG($im); imagedestroy($im); ?>
Для вывода сформированного графика в браузер можно воспользоваться скриптом, аналогичным тому, который был использован в примере со счетчиком.
К сожалению, в рамках данной статьи были рассмотрены далеко не все возможности библиотеки GD , но надо же что-то оставить и для самостоятельного изучения. К счастью, документация к GD написана вполне разумным языком и дает исчерпывающую информацию об использовании возможностей этой библиотеки. Поэтому самостоятельное изучение обещает быть легким и интересным.