Html в картинку php

Эта статья рассчитано на программистов со средним уровнем знания PHP.
Введение

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

* Создание кнопок с надписями, текст которых хранится в базе данных
* Графическое отображение статистических данных
* Создание различных графиков и диаграмм

В этой статье рассматривается использование библиотеки GD для обработки изображений. GD является внешней библиотекой, доступной в виде модуля PHP

Цель этой статьи

В статье освещаются следующие вопросы:

* Что такое заголовки (headers)
* Использование функций библиотеки GD для динамического создания изображений средствами PHP
* Использование HTTP заголовков для указания браузеру, что вывод PHP-скрипта представляет собой изображение

Создание заголовка

По умолчанию, PHP выводит один заголовок: Content-type: text/html, означающий, что результатом работы скрипта является HTML код

Как видите, PHP выводит Content-type: text/html и пустую строку, прежде чем выводить результат работы скрипта . Все до пустой строки является заголовком HTTP. Заголовок содержит информацию для браузера и не отображается на экране.

Используемый по умолчанию заголовок Content-type: text/html показывает, что выводится HTML код, который браузер должен обработать. Если изменить его скажем на Content-type: text/plain, то браузер будет воспринимать документ просто как текст и выводить его "как есть" Для вывода заголовков в PHP используется функция header().

Конечно, послать заголовок недостаточно, нужно еще и позаботиться о том, чтобы вывести данные в нужном формате. Не следует думать, что, просто послав заголовок Content-type: application/zip и выведя "Всем привет", вы сможете открыть результат работы такого скрипта с помощью WinZip’а.

Примечание Web-сервер перед отправкой данных клиенту может добавлять и другие заголовки помимо Content-type, их рассмотрение выходит за рамки данной статьи.

Что нам потребуется

Создание изображений в PHP требует наличия библиотеки GD написанной Thomas Boutell . (http://www.boutell.com/gd) Поддержка этой библиотеки включается при компиляции PHP с опцией —with-gd. Для работы с TrueType шрифтами также может понадобиться библиотека FreeType (http://www.freetype.org). Установка обеих библиотек подробно описана в соответствующей документации.

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

Генерация изображения состоит из трех основных этапов:

* Создание изображения
* Отрисовка изображения
* Вывод полученной картинки в браузер

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

Перед тем, как что-либо рисовать, необходимо зарегистрировать цвета, которые вы собираетесь использовать. Для этого предназначена функция ImageColorAllocate(). Этой функции передаются идентификатор изображения и три числа, задающие цвет (RGB — red, green, blue). Функция возвращает идентификатор цвета, который используется в последующих операциях отрисовки изображения.
Пример:

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

И, наконец, вывод изображения осуществляется вызовом функции ImagePNG() или ImageGIF(). Последняя не поддерживается в текущей версии GD из-за проблем с лицензированием (разработчики GD обещают возобновить поддержку формата GIF после 7 июля 2004 года, когда истечет срок действия патентов Unisys на алгоритм сжатия LZW, используемый в GIF. Уже после написания этой статьи в библиотеку была включена поддержка форматов JPEG и WBMP. -прим. переводчика). ImagePNG() преобразует внутреннее представление изображения в PNG файл и посылает его клиенту. Аналогично работает и ImageGIF(), но используя формат GIF. Перед использованием функций ImagePNG() или ImageGIF() необходимо послать соответствующий заголовок Content-type
Формат Заголовок
PNG "Content-type: image/png"
GIF "Content-type: image/gif"

Примечание Заголовки относятся ко всему документу. То есть если вы послали заголовок, показывающий, что вы выводите изображение, вы не можете выводить текст. А после того, как вы вывели первый байт данных, заголовок уже нельзя изменить! Это значит, что сначала нужно вызвать header() и только затем начинать вывод данных, иначе вы получите сообщение об ошибке. Если вы не посылаете заголовок Content-type, PHP автоматически посылает Content-type: text/html как только вы начинаете вывод данных.

Как это выглядит на практике

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

Теория биоритмов гласит, что эмоциональная, физическая и интеллектуальная активность каждого человека циклически изменяются с определенными интервалами. В момент рождения, все три кривые выходят из нулевой точки и изменяются в течение всей жизни. Если кривая проходит выше нулевой отметки — это активная фаза, ниже — пассивная. Момент пересечения нулевой отметки означает критический день: вы подвержены риску эмоциональной, физической или интеллектуальной "катастрофы". А в тот день, когда все три кривые проходят через ноль, лучше вообще воздержаться от работы над важными PHP проектами.

У каждой кривой собственный цикл:

* Физическая: 23 дня
* Эмоциональная: 28 дней
* Интеллектуальная: 33 дня

Кривые представляют собой синусоиды, поэтому для вычисления значений биоритмов мы можем воспользоваться встроенной функцией sin()

Установка даты рождения

Сначала мы должны получить дату рождения и вычислить, сколько дней человек прожил до текущей даты. Результат будет использован для вычисления текущей фазы биоритма.

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

Совет Для вычисления мы используем юлианский календарь. Дата рождения и текущая дата переводятся в количество дней по юлианскому календарю. Разность этих двух чисел дает искомый результат.

Примечание В этом примере функция gregorianToJD() реализована на PHP (см. полный код скрипта ниже). Вообще-то, эта функция реализована в календарном модуле PHP, но на момент написания этой статьи эта функция работала некорректно в последней версии PHP. Поэтому была использована "самодельная" функция. Если в вашем PHP включена поддержка функций работы с календарем, вам нужно удалить определение этой функции из кода в примере.

Подготовка изображения

Порядок действий Подготовка к рисованию состоит из вызова нескольких функций GD. Следующий участок кода:

* Создает изображение нужных размеров.
* Регистрирует используемые цвета.
* Очищает изображения, заливая его цветом фона

Совет Перед началом отрисовки изображения залейте его цветом фона. Это гарантирует, что фон изображения будет того цвета, что вам нужен. Это также полезно для создания прозрачного фона, как будет показано далее.

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

Рисуем рамку и выводим текст

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

* Рисуем рамку, внутри которой будет размещен график, и оси
* Выводим текст примечаний

Рисунок 1. График биоритмов

Рисуем кривые

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

* Функция drawRhythm вызывается три раза с различными параметрами
* Функция drawRhythm содержит цикл, который вычисляет значение биоритма для каждого дня, и рисует линии.

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

Вывод изображения клиенту

Итак, мы нарисовали наш график. Теперь остается отправить это изображение в браузер.

* Посылаем заголовок, показывающий что мы выводим изображение в формате GIF или PNG.
* Определяем чересстрочный формат вывода изображения.
* Делаем цвет фона прозрачным.
* Используя функцию imageGIF или imagePNG выводим изображение.

Совет После вызова imageGIF или imagePNG, изменения в изображение вносить уже нельзя, так как оно уже было отправлено клиенту.

Использование ImageInterlace() позволяет задать режим чересстрочного или прогрессивного вывода изображения (если используемый формат изображения позволяет это). Этот режим интересен тем, что позволяет браузеру начать отображение картинки еще до ее полной загрузки. Сначала выводится изображение с низким качеством, которое улучшается по мере загрузки данных. Это незаменимо при передаче больших изображений по низкоскоростным каналам.

Функция ImageColorTransparent() задает цвет прозрачных участков изображения (опять же, если используемый формат позволяет это). В нашем примере мы используем цвет, сохраненный в переменной $colorBackgr, делая участки изображения, нарисованные этим цветом, прозрачными.
Как использовать полученное изображение

Итак, мы написали программу, создающую изображение. Как ее использовать? На самом деле все очень просто: Вы можете использовать скрипт в HTML коде как обычный файл изображения. Поскольку скрипт в нашем примере является интерактивным, то для его использования нам нужно ввести http://my.server.net/script.php в адресную строку браузера. Для скрипта, не требующего пользовательского ввода, например получающего информацию из базы данных, просто вставьте в HTML код страницы тэг такого содержания:

Полный код скрипта

Заключение

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

В статье описывается работа с расширением PHP — GDLib, которое позволяет динамически формировать изображения на Web-страницах.
Автор — Nykoh (Нико)
Перевод с французского — Антон Федорченко
Адрес оригинала — http://www.phpdebutant.org/article111.php

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

Примечание переводчика

в примерах все названия идентификаторов даны на французском языке. Для того, чтобы облегчить читателю понимание кода, мы предлагаем их перевод:
blanc — белый
bleu — голубой
couleur — цвет
couleur_fond — цвет фона
fichier — файл
gris — серый
hauteur – высота
hauteurimage — высота изображения
largeur – ширина
largeurimage – ширина изображения
mois — месяц
noir — черный
police – гарнитура шрифта
rouge – красный
tableau — массив
vert — зеленый

Примечание переводчика

По умолчанию в PHP 5 все расширения отключены, в том числе и расширение для формирования динамических изображений — GD. За инструкцией по настройки данного расширения, следует обратится к статье Установка Apache, PHP, MySQL

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

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

Внимание: Прежде чем начать работу, нужно кое-что узнать. Дело в том, что существует несколько различных версий этого расширения PHP, а поставщики услуг хостинга могут отключить определенные функции, а то и всю библиотеку GD. С какой целью? Известно, что обработка изображений – это большая нагрузка на сервер.

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

phpinfo.php

Если у вас появится таблица похожая на эту – все нормально (особенно если версия библиотеки новее, чем 2.0)

Как было упомянуто выше, некоторые возможности могут быть отключены. В таком случае следует просто попробовать использовать ту или иную функцию. Если это приведет к ошибке: Fatal error: Call to undefined function, — у вас не должно быть никаких сомнений, что данная функция отключена.

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

Для начала необходимо создать пустой холст. Сразу поясним, что в данной статье мы будем рассказывать исключительно об изображениях в формате PNG или JPG, формат GIF останется без нашего внимания. Дело в том, что этот формат перестал поддерживаться библиотекой GD, начиная с версии 1.3, правда ограниченная поддержка GIF появилась опять в версии 2. Вывод: формат PNG – выгодная альтернатива GIF

Важное замечание

Во всех учебных курсах сайта www.phpdebutant.org, скрипты имели целью динамическое создание html-страниц. На этот раз, используя библиотеку GD, мы создаем изображения, поэтому в данном случае вы должны забыть на время конструкции echo и print. По умолчанию PHP-скрипт генерирует html-страницу, что не требует уточнения в виде отправки особого http-заголовака. Но если мы создаем изображение, в самом начале скрипта необходимо указать его тип, отправкой соответствующего заголовка, например для PNG: header ("Content-type: image/png");

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

imagev > ( "Content-type: image/png" );
$im = ImageCreate ( 200 , 100 )
or die ( "Ошибка при создании изображения" );
$couleur_fond = ImageColorAllocate ( $im , 255 , 0 , 0 );
ImagePng ( $im );
?>

Этот небольшой скрипт генерирует красный прямоугольник (очень скромное, но хорошее начало). Описание механизма:

• Функция ImageCreate возвращает дескриптор $im. Дескриптор $im должен передаваться всем функциям прорисовки изображения. Параметры функции ImageCreate соответствуют длине и ширине создаваемого изображения (200х100).
• Задача оператора or die – перехват возможных ошибок.
• Создать цвет можно при помощи функции ImageColorAllocate. Она используется для

• создания цвета и его сохранение в переменной с целью последующего использования
• добавление цвета в палитру изображения $im

Ее параметры соответствуют красной, зеленой и синей компонентам цвета и представляют из себя целые числа от 0 до 255. В этом примере мы создали красный цвет.

Важное замечание

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

Вызов скрипта imagevide.php (пустое_изображение.php) создаст изображение в формате PNG. Для того, чтобы его использовать на web-сайте, нужно действовать так же, как и в случае с "классическими" изображениями.

Совсем несложно! Вы даже можете передавать параметры скрипту, который будет генерировать изображение (например цвет фона).

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

• Вы можете заменить ImageCreate на ImageCreateTrueColor, чтобы создать 32 битное изображение (идеально для фотографий)
• Вы можете заменить ImagePng функцией ImageJPEG чтобы создать изображение в формате JPEG (не забудьте поменять параметр функции header на header("Content-type: image/jpeg").
• Ниже мы увидим, что сгенерированное изображение можно сохранить

II) Функции прорисовки изображения

Сначала вам необходимо знать, что любой рисунок связан с понятием координат, поэтому в этом небольшом абзаце статьи мы дадим некоторые представления об этом вопросе.
Верхний левый угол изображения имеет координаты (x=0, y=0), а нижний правый (x = ширина изображения, y=высота изображения).

Например, для изображения с разрешением 100 на 200 пикселей координаты будут такими:

Различные функции прорисовки изображения принимают в качестве параметров его координаты. Приучайтесь передавать их в требуемом порядке. Так, например, для того, чтобы нарисовать прямоугольник, необходимо передать координаты двух точек соответствующей функции (ImageRectangle). Координаты первой точки соответствуют верхнему левому углу изображения, координаты второй точки соответствуют нижнему правому углу. Не путайте аргументы, поскольку некоторые функции могут выдать ошибочные результаты.

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

Создает пустой холст (256 цветов) $im высотой $largeur и шириной $hauteur. (формат PNG предпочтителен)

Эта функция похожа на ImageCreate но глубина цвета изображения не ограничена 256 цветами. (формат JPEG предпочтителен)

Помещает в переменную $col цвет компонентами которого являются $rouge, $vert, $bleu (диапазон 0 .. 255).Подробности см. в первой части.

Создает эллипс на изображении $im с центром в точке ($x,$y), шириной $l, высотой $h и цветом $col.

Идентична ImageEllipse, но эллипс заполняется цветом $col

Создает на изображении $im прямоугольник цвета $col, расположенный между точкой с координатами ($x,$y) и нижним правым углом изображения цвета $col

Рисует линию цвета $col, которая проходит между двумя точками с координатами ($x1,$y1) и ($x2,$y2)

На изображении $im рисует многоугольник, координаты которого перечислены в массиве $points ($points[0]=$x0, $points[1]=$y0, $points[2]=$x1, $points[3]=$y1, и т. д.), $num_points – количество точек в массиве, $col — цвет.

Идентична ImagePolygo, но эллипс заполняется цветом $col

На изображении $im рисует прямоугольник, верхний левый угол которого имеет координаты ($x0, $y0) , а правый нижний ($x1, $y1). $col – цвет прямоугольника

Идентична ImageRectangle, но эллипс заполняется цветом $col

Эти функции позволяют изменить стиль прочерчиваемых линий. Для более подробной информации посмотрите официальную документацию, особенно обратите внимание на пример использования функции ImageSetStyle , который также является показательным для функции ImageSetBrush

В изображении $im рисует точку с координатами ($x,$y) и цветом $col

Меняет толщину линий, созданных различными функциями.

В изображении $im создает строку $chaine с координатами (левый верхний угол) ($x,$y) цвета $col $police — размер (гарнитура) шрифта (от 0 до 5)

Идентична ImageString , но строка выводится вертикально

III) Пример первый: статистика посещений сайта в виде графика

Чтобы применить полученные знания на практике – создадим простой скрипт-пример. Часто требуется представить статистику посещения сайта в форме гистограммы

Мы предполагаем, что вы уже разработали ту часть скрипта, которая отвечает за учет посетителей (возможно с использованием таблицы MySQL). Об ее реализации мы говорить здесь не будем, это не цель данной статьи. Допустим, что статистика посещений за каждый месяц помещена в массив $visites. В этой статье мы наполняем массив "вручную", но вы можете сделать это сами, используя данные вашей таблицы MySQL.

a) Статистика посещений: создание изображения и цвета

Начнем с создания массива, который содержит в себе статистику посещений сайта за 12 месяцев (12 элементов). Затем сгенерируем картинку разрешением 400х300 и создадим три цвета, один из которых (белый) будет цветом фона.

visites.php

= array( 138 , 254 , 381 , 652 , 896 , 720 , 140 , 556 , 663 , 331 , 407 , 768 );

header ( "Content-type: image/png" );
$largeurImage = 400 ;
$hauteurImage = 300 ;
$im = ImageCreate ( $largeurImage , $hauteurImage )
or die ( "Ошибка при создании изображения" );
$blanc = ImageColorAllocate ( $im , 255 , 255 , 255 );
$noir = ImageColorAllocate ( $im , 0 , 0 , 0 );
$bleu = ImageColorAllocate ( $im , 0 , 0 , 255 );
?>

b) Рисуем оси графика

Поместим горизонтальную ось времени (простая черная линия) в нижнюю часть изображения, оставив поле в 10 пикселов.

Внизу подписываем номер каждого из 12 месяцев, используя цикл for и функцию ImageString. Номера месяцев располагаются через каждые 30 пикселов, начиная с левой стороны изображения.

Наконец, проводим вертикальную линию, ось ординат статистики посещений.

c) Рисуем палочки

Теперь переходим к более сложной задаче – рисованию палочек.

Для начала нам необходимо узнать максимальное число посетителей, которое мы представим на графике. Здесь мы выбрали случайное значение – 1000, но на самом деле вам, наверное, придется его вычислять, осуществляя запрос на максимальное значение столбца вашей таблицы MySQL. Мы же сделаем проще…

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

Нам остается только прорисовать каждый прямоугольник, начиная с координат его верхнего левого угла и кончая нижним правым.

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

// максимум посещений
$visitesMax = 1000 ;

// рисуем палочки
for ( $mois = 1 ; $mois 12 ; $mois ++) <
$hauteurImageRectangle = round (( $visites [ $mois — 1 ]* $hauteurImage )/ $visitesMax );
ImageFilledRectangle ( $im , $mois * 30 — 7 , $hauteurImage — $hauteurImageRectangle , $mois * 30 + 7 , $hauteurImage — 10 , $bleu );
ImageString ( $im , 0 , $mois * 30 — 7 , $hauteurImage — $hauteurImageRectangle — 10 , $visites [ $mois — 1 ], $noir );
>

// вот и все
ImagePng ( $im );
?>

d) А вот и результат!

Результат, конечно, не назовешь превосходным, но следует учитывать, что нам удалось сделать что-то более или менее презентабельное, написав всего 20 строчек простого кода, что само по себе уже неплохо.

Гистограмма посещаемости по 12 месяцам.

IV) Другие полезные функции

Вот еще один набор полезных функций, предназначенных для управления цветовой палитрой, а также для получения различной информации об изображениях.

Синтаксис с ссылкой на документацию

"Это функция использует в качестве параметра имя файла $fichier и возвращает массив, содержащий 4 элемента: (1) $tableau[0] ширина изображения (px), (2) $tableau[1] высота изображения (px), (3) $tableau[2] тип изображения (см. документацию), (4) $tableau[3] возвращает строку, которую можно вставить в тег IMG (w

Области изображения $im, прорисованные цветом $col становятся прозрачными. Чтобы сохранить прозрачность, используйте формат PNG

Копируем прямоугольную область изображения $src_im на изображение $dst_im. Область копирования ограничена координатами точки верхнего левого угла($src_x, $src_y), шириной $src_l и высотой $src_h. Скопированная область появляется в изображении-реципиенте в точке с координатами. ($dst_x, $dst_y)

Идентична ImageCopy, в добавок к этому функция осуществляет постепенный переход тонов интенсивностью $intensite, которая принимает значения от 1 до 100.

Выполняет те же действие, что и ImageCopy, а также производит изменение размеров изображения. Смотрите следующий пример

Идентична ImageCopyResampled, но результат масштабирования менее четок, зато функция работает быстрее.

Возвращает идентификатор ресурса, $im, указывающий на изображение, которое находится в файле формата jpeg $fichier.

Возвращает идентификатор ресурса, $im, указывающий на изображение, которое находится в файле формата png $fichier.

Возвращает ширину изображения $im

Возвращает высоту изображения $im

V) Пример второй: генерация миниатюр (уменьшенных копий изображения)

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

a) Начало

В отличие от первого примера, данный скрипт будет записывать изображение в файл, а не генерировать его на лету. Поэтому необходимость в отправке особого http-заголовка при помощи функции header() отпадает. Таким образом, скрипт становится "классическим" и может генерировать html.

Начнем с создания пустого холста размером 200х150, затем считаем существующее изображение (из файла) при помощи функции ImageCreateFromJpeg. Потом нам также могут понадобится размеры изображения-источника, для этого мы воспользуемся imagesx и imagesy.

miniature.php

$largeurDestination = 200 ;
$hauteurDestination = 150 ;
$im = ImageCreateTrueColor ( $largeurDestination , $hauteurDestination )
or die ( "Ошибка при создании изображения" );

$source = ImageCreateFromJpeg ( $fichierSource );

$largeurSource = imagesx ( $source );
$hauteurSource = imagesy ( $source );
?>

b) Рамка

Предварительно создав несколько цветов, рисуем рамку. Чтобы упростить задачу, мы будем использовать различные оттенки серого.

Существует простой способ создания подобной рамки, который заключается в прорисовке нескольких разноцветных прямоугольников, вложенных один в другой. Начинаем с самого большого прямоугольника темного цвета (его размер совпадает с размерами изображения). Затем на него накладываем другой меньший по размерам прямоугольник, цвет которого будет более светлым и т.д.

Толщина создаваемой нами рамки – 8 пикселов.

= ImageColorAllocate ( $im , 255 , 255 , 255 );
$gris [ 0 ] = ImageColorAllocate ( $im , 90 , 90 , 90 );
$gris [ 1 ] = ImageColorAllocate ( $im , 110 , 110 , 110 );
$gris [ 2 ] = ImageColorAllocate ( $im , 130 , 130 , 130 );
$gris [ 3 ] = ImageColorAllocate ( $im , 150 , 150 , 150 );
$gris [ 4 ] = ImageColorAllocate ( $im , 170 , 170 , 170 );
$gris [ 5 ] = ImageColorAllocate ( $im , 190 , 190 , 190 );
$gris [ 6 ] = ImageColorAllocate ( $im , 210 , 210 , 210 );
$gris [ 7 ] = ImageColorAllocate ( $im , 230 , 230 , 230 );

for ( $i = 0 ; $i 7 ; $i ++) <
ImageFilledRectangle ( $im , $i , $i , $largeurDestination — $i , $hauteurDestination — $i , $gris [ $i ]);
>
?>

c) Создание миниатюры

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

• ($im) Изображение-реципиент
• ($source) Изображение-источник
• Координата х области изображения-реципиента, на которую накладывается изображение-копия.
• Координата y
• Координата х копируемой области изображения-источника (0 если мы хотим скопировать все изображение)
• Координата (y)
• Ширина копии , которая вставляется на изображение-источник ($largeurDestination-(2*8) ширина изображения-реципиента минус ширина рамки справа и слева).
• Высота копии (проделываем те же операции, что и с шириной)
• Ширина копируемой области изображения-источника
• Высота копируемой области изображения-источника.

Создав миниатюру, добавим небольшой текст с информацией на нее.

Внимание

Функция ImageCopyResampled – создает большую нагрузку на сервер, не злоупотребляйте ей!

( $im , $source , 8 , 8 , 0 , 0 , $largeurDestination -( 2 * 8 ), $hauteurDestination -( 2 * 8 ), $largeurSource , $hauteurSource );
ImageString ( $im , 0 , 12 , $hauteurDestination — 18 , " $fichierSource — ( $largeurSource x $hauteurSource )" , $blanc );
?>

d) Сохранение результата.

Нам остается только сохранить полученный результат в файле, имя которого начинается с mini_. Это мы сделаем при помощи функции ImageJpeg.
Когда эта функция имеет только один параметр, изображение выводится в браузер пользователя. Однако если в качестве второго параметра передается имя файла, никакого вывода в браузер не произойдет, а картинка будет сохранена в указанном файле. То же правило действует для функции ImagePng

= "mini_ $fichierSource " ;
ImageJpeg ( $im , $miniature );
echo "Миниатюра успешно создана: $miniature " ;
?>

Вот результат "mini_photo3.jpg":

VI) FAQ и заключение

Библиотека GD предоставляет широкие возможности для работы с изображениями, но они порой слишком загружают сервер (это справедливо для большинства хостингов)

Вот небольшой набор вопросов и ответов по часто встречающимся проблемам

Мое изображение не выводится, браузер ведет себя так, как будто изображение не существует.
Скорее всего ошибку следует искать в вашем скрипте. Сделайте комментарий из строки header("Content-type: image/png") (или header("Content-type: image/jpeg" )), а также из строки ImagePng($im) (илиImageJpeg($im) ), чтобы получить сообщение об ошибке

Скрипт долго выполняется на моем хостинге, это нормально?
Если вы используйте "тяжеловесные" функции как ImageCopyResampled, это неудивительно. У интерпретатора PHP, установленного на хостинге, и без этого работы хватает…

Цвета моего изображения искажены (или оно выводится как черно-белое), почему?
Скорее всего вы использовали функцию ImageCreate, которая ограничивает цветовую палитру 256 цветами. Чтобы преодолеть это ограничение используйте функцию ImageCreateTrueColor вместо ImageCreate.

Заканчивая данную статью, покажем результат, который можно получить, скомбинировав два примера этой статьи. Тут к гистограмме мы добавили полутона, используя тот же метод, что и в примере 2.

Библиотека GD дает возможность работать с изображениями в PHP. Подробнее о функциях на php.net.

Далее представлены примеры как изменить размер, вырезать часть изображения и т.д. Все примеры универсальные и работают с разными типами файлов без изменений кода, у PNG файлов сохраняется прозрачность.

Открытие изображения

Итак, есть исходное изображение PNG 400x400px:

С помощью функции getimagesize() получим ширину, высоту и тип, далее откроем его функциями в зависимости от типа:

Изменение размера изображения (resize)

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

Результат

$w = 200; $h = 0;

$w = 200; $h = 100;

$w = 100; $h = 200;

Обрезать изображение (crop)

Пример вырезает из исходного изображения часть размером $w на $h .
$x и $y задают начальные координаты в пикселях или процентах.

Результат

$x = 0; $y = 0;

$x = ‘50%’; $y = ‘0%’;

$x = ‘100%’; $y = ‘0%’;

Поворот изображения

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

Поворот на не ровный угол увеличит ширину и высоту фото:

Зеркальное отражение

Imageflip() зеркалит изображение, могут быть следующие параметры:

Наложение водяного знака (watermark)

Для защиты на картинки наносят копирайт, например, данный скрип накладывает картинку watermark.png на основное изображение:

Результат

$x = ‘50%’; $y = ‘50%’;

$x = ‘100%’; $y = ‘0%’;

$x = ‘100%’; $y = ‘100%’;

Добавление фона

Актуально для PNG с прозрачностью. Скрипт вставит на задний фон картинку с положением $x и $y . Размер основного изображения не изменится.

Фон

Результат

Фильтры

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

IMG_FILTER_NEGATE

Инвертирует цвета изображения.

IMG_FILTER_GRAYSCALE

Преобразует цвета изображения в градации серого.

IMG_FILTER_COLORIZE

Преобразует цвета изображения в градации заданного цвета в формате RGB.

0, 240, 120

150, 240, 120

90, 240, 90

IMG_FILTER_BRIGHTNESS

Изменяет яркость изображения, диапазон от -255 до 255.

-200

-100

100

200

IMG_FILTER_CONTRAST

Изменяет контрастность изображения. Уровень может быть от -100 до 100.

-100

-50

50

100

IMG_FILTER_EDGEDETECT

Использует определение границ для их подсветки.