ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Создание изображения. Создание холста, рисование и вывод текста в изображение

Создание изображения

Для создания изображения в PHP необходимы четыре основных шага:

  1. Создание холста, предназначенного для дальнейшей работы.
  2. Вычерчивание форм или вывод текста на этом холсте.
  3. Вывод финального изображения.
  4. Освобождение ресурса.

Рассмотрим простой сценарий создания изображения.

simpllegraph.php —вывод простого литнейного графика с текстом "Продажи"

<?php
//настройка изображения
$height = 200;
$width = 200;
$image = ImageCreateTrueColor($width, $height);
$white = ImageColorAllocate($image, 255, 255, 255);
$blue = ImageColorAllocate($image, 0, 0, 64);
//отрисовка изображения
ImageFill($image, 0, 0, $blue);
ImageLine($image, 0, 0, $width, $height, $white);
ImageString($image, 4, 50, 150, 'Sales', $white);

// Выводим изображение в браузер
header("Content-type: image/png");
ImagePng($image);
// Уничтожаем изображение в памяти
ImageDestroy($image);
?>

В окне веб-браузера это будет выглядеть ТАК.

Рассмотрим шаги создания изображений поэтапно.

Создание холста

Для того чтобы приступить к созданию или изменению изображения в PHP, необходимо создать идентификатор изображения. Это можно сделать двумя основными способами. Первый заключается в создании пустого холста с помощью вызова функции ImageCreateTrueColor(), что и предпринято в сценарии.

$image = ImageCreateTrueColor($width, $height);

Функция ImageCreateTrueColor() требует передачи двух параметров. Первый из них задает ширину нового изображения, а второй высоту. Функция возвращает идентификатор нового изображения (Идентификаторы похожи на дескрипторы файлов).

Другой способ связан с чтением файла существующего изображения, после чего к нему можно применить фильтры, изменить размер или добавить что-либо. В зависимости от формата введенного файла, это можно сделать с помощью одной из функций ImageCreateFromPNG(), ImageCreateFromJPEG(), ImageCreateFromGIF(). Параметром каждой функции является имя файла, например:

$image = ImageCreateFromPNG('baseimage.png');

Рисование и вывод текста изображения

Рисование или вывод текста в изображение выполняется в два этапа. Сначала необходимо выбрать цвета, которые будут использоваться при рисовании. Цвета на мониторе компьютера формируются за счет смешания красного, зеленого и синего компонентов. Форматы изображений используют цветовую палитру, которая состоит из заданного подмножества всех возможных комбинаций трех цветов. Чтобы использовать цвет для рисования, его необходимо добавить к палитре изображения. И это нужно сделать для каждого цвета, даже для черного и для белого.

Цвета для изображения можно выбрать, вызвав функцию ImageColorAllocate(). Ей необходимо передать идентификатор изображения и значения — красный, зеленый и синий (RGB) компоненты требуемого цвета.

В нашем примере мы использовали два цвета: синий и белый. Они определяются при выводе функций:

$white = ImageColorAllocate($image, 255, 255, 255);
$blue = ImageColorAllocate($image, 0, 0, 64);

В результате возвращается идентификатор цвета, который можно использовать для последующего доступа к данному цвету.

Далее, чтобы формировать собственное изображение, существует несколько различный функций, выводящих нужные объекты: линии, дуги, многоугольники, текст.

Функции рисования обычно используют следующие параметры:

  • Идентификатор изображения.
  • Начальные и, при необходимости, конечные координаты изображаемого объекта.
  • Цвет объекта.
  • Информация о шрифте для вывода текста.

В сценарии использованы три таких функции. Рассмотрим каждую из них в отдельности.

Вначале с помощью функции ImageFill() был создан черный фон:

ImageFill($image, 0, 0, $blue);

Параметрами функции является идентификатор изображения, начальные координаты заполняемой области (x и y) и цвет заливки.

Обратите внимание, что координаты точки в изображении отсчитываются от левого верхнего угла, для которого x = 0, y = 0. Координаты правого нижнего угла изображения x = $width, y = $height. Это не совпадает со стандартным соглашением вывода графики, поэтому будте аккуратны!

Затем из левого верхнего (0, 0) в правый нижний ($width, $height) угол изображения проводится прямая линия:

ImageLine($image, 0, 0, $width, $height, $white);

Параметрами этой функции являются идентификатор изображения, начальные и конечные точки линии и цвет.

В заключении на изображение помещается метка:

ImageString($image, 4, 50, 150, 'Sales', $white);

Функции ImageString() требуются несколько иные параметры. Ее прототип имеет вид:

int ImageString (resouce im, int font, int x, int y, string s, int col)

Параметрами являются: идентификатор изображения, шрифт, координаты x и y начальной точки текста, выводимый текст и его цвет.

Шрифт задается числом от 1 до 5. Этот диапазонотвечает набору встроенных шрифтов. Альтернативой этому является применение шрифтов TrueType или PostScript Type 1. Каждому из этих наборов шрифтов соответствует свой набор фкнкций. В следующем примере будет продемонстрировано применение функций для шрифтов TrueType.

Гораздо лучше использовать набор функций одного из альтернативных шрифтов, так как текст, выводимый функцией ImageString() и ей подобными, например, ImageChar() (вывод символа в изображение), получается ступенчатым. Функции шрифтов TrueType и PostScript воспроизводят текст со сглаживанием.

Вывод финального изображения

Изображение можно вывести либо непосредственно в браузер, либо в файл.

В нашем примере вывод изображения выполняется в браузер. Этот процесс состоит из двух шагов. Вначале необходимо сообщить веб-браузеру, что будет выводиться именно изображение, а не текст или HTML-код. Это достигается с помощью функции Header() , которая указывает MIME-тип изображения:

header("Content-type: image/png");

Обычно при получении файла браузером, первое, что отправляет веб-сервер — это MIME-тип. Для HTML или PHP страницы (после выполнения кода), заголовок имеет вид:

Content-type: text/html

Он сообщает браузеру, как необходимо интерпретировать последующие данные.

В нашем случае требуется сообщить браузеру, что пересылается изображение, а не не обычный HTML-вывод. Это можно сделать с помощью функции Header(), которая пока еще не обсуждалась.

Данная функция пересылает строки HTTP-заголовков. Другим типичным их применением является HTTP-перенаправление. Она заставляет браузер загружать вместо запрашиваемой другую страницу. Обычно это делается в случае перемещения страницы. Например:

Header ('Location: http://sevidi.ru/phpstroy/test/abc.php');

Важно отметить, что функция Header() не может быть выполнена, если HTTP-заголовок страницы уже был отправлен. PHP посылает HTTP-заголовки автоматически всякий раз, когда происходит вывод чего-либо в браузер. Следовательно, наличие любого оператора echo или даже просто пробельного символа перед открывающимся PHP-дескриптором приводит к отправке заголовка, вследствии чего при попытке вызова функции Header() PHP выдаст предупреждающее сообщение. Тем не менее, можно переслать несколько HTTP-заголовков с помощью нескольких вызовов функции Header() в одном и том же сценарии, хотя все они должны появиться до первого вывода информации в браузер.

После отправки заголовка можно вывести изображение посредством вывода следующей функции:

ImagePng ($image);

В результате в браузер будет выведено изображение в формате PNG. Если требуется другой формат, можно воспользоваться функцией ImageJpeg(), если включена поддержка Jpeg. Разумеется, вначале необходимо отправить соответствующий заголовок, то есть:

header("Content-type: image/jpeg");

Вторая возможность, в отличие от всех предыдущих, заключается в выводе изображения в файл, а не в браузер. Это можно добиться, добавив в функцию ImagePng() (или аналогичную функцию для другого формата) необязательный второй параметр:

ImagePng ($image, $filename);

Освобождение ресурсов

По окончании работы с изображением необходимо высвободить ресурсы, уничтожив идентификатор изображения. Это делается с помощью функции ImageDestroy():

ImageDestroy($image);

Использование автоматически сгенерированных изображений на других страницах

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

  1. Вся страница может состоять из рисунка, как в предыдущем примере.
  2. Можно сохранить изображение в файле, а затем ссылаться на него с использованием обычного HTML-дескриптора <img>.
  3. В дескриптор изображения можно поместить сценарий, создающий изображение.

О методах 1 и 2 уже было рассказано. Рассмотрим метод 3. Для этого изображение вставляется в HTML-код с помощью следующего HTML-дескриптора изображения:

<img src = "simplegraph.php" height ="200" width = "200" alt = "Объем продаж падает">

В окне веб-браузера это будет выглядеть ТАК.