Урок № 12 - GD - работа с изображениями.

Автор (участник forum.php.su): valenok
Источник: forum.php.su
Обсуждение: Обсуждение уроков.

Введение:

Возможности PHP не ограничиваются созданием HTML'я. PHP можно использовать для создания и манипулирования изображениями различных форматов, среди которых gif, png, jpg, wbmp, and xpm. Кроме того PHP способен выводить поток изображения прямиком в браузер. Для работы вам понадобится PHP собранный с графической библиотекой GD . GD и PHP могут зависеть и от других библиотек, в зависимости от того, с какими форматами изображений вы будете работать.

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

Об установке и настройке библиотеки можно прочесть в официальной документации. Вероятней всего вам это не понадобится потому что у вас всё уже давно установлено.


С чем имеем дело

Функции обработки с изображениями в PHP я поделю на две категории. Те что работают с файлами и на те что работают с изображением в памяти(ресурсом).

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

И так, документация: http://ru2.php.net/manual/ru/ref.image.php. Да да, на ссылочку нужно нажать сейчас. Дальше пойдём по ней.

Нашей первой станцией будет imagecreatetruecolor.
Документация гласит Create a new true color image.Я уверен вы тоже всегда думали что цвета не настоящими быть не могут, и я тоже так до сих пор думаю =) True color на самом деле это название, метод представления и хранения изображения, позволяющий отобразить больш́ое количество цветов, полутонов и оттенков в RGB формате. Словечком напомню что RGB представлении от Red Green Blue это способ выразить любой цвет при помощи трёх базовых цветов.

resource imagecreatetruecolor ( int $width , int $height )
Функция наша принимает два целочисленных аргумента. Длина и ширина нового изображения. Если вы догадались покрутить вниз после того как открыли документацию, то увидели что результатом выполнения этой функции в их примере был квадратик чёрного цвета. То что квадратик был чёрный, вас вовсе пугать не должно.
Если вы захотите квадратик другого цвета, вам придётся попробовать в деле нашу следующую функцию, после еще одного слова об этой.

Результат функция возвращает ресурсного типа данных.
Это значит что дальше мы работаем уже непосредственно с чем-то в памяти.

Дальше этот идентификатор мы передадим в другую функцию image colorallocate
Функция генерирует представления цвета в том виде, в который используется в картинке, для дальней работы с этим цветом на картинке.
Самый первый вызов этой функции задаёт фон изображения.

int imagecolorallocate ( resource $image , int $red , int $green , int $blue )
Три параметра нам известны. Числа от 0 до 255 выражающие цвет в системе RGB .
Для чёрного нам понадобится трижды 0, для белого трижды 255.
Первый же параметр функции resource $image это тот самый идентификатор, который мы получили ранее в imagecreatetruecolor . Параметр этот требуется для того, чтобы представление цвета соответствовало требованиями формата изображения.

И так, создали изображение, приготовили палитру, пора начинать творческий процесс. Image Line
Как в принципе следует из названия - функция рисует линию на изображении.
Вдаваться в подробности, о том, как это происходит, мы не будем. Мы просто нарисуем линию.

<?PHP

// create a 100*100 image
$img = imagecreatetruecolor(100, 100);

// allocate some colors
$red = imagecolorallocate($img, 255, 0, 0);
$green = imagecolorallocate($img,   0, 255,   0);
$blue = imagecolorallocate($img,   0, 0, 255);

// draw some lines
imageline($img, 40, 30, 40, 40, $green);
imageline($img, 50, 30, 50, 40, $green);
imageline($img, 45, 38, 45, 39, $green);

imageline($img, 37, 45, 53, 45, $green);
imageline($img, 37, 43, 37, 45, $green);
imageline($img, 53, 43, 53, 45, $green);

// output image in the browser
header("Content-type: image/png");
imagepng($img);

// free memory
imagedestroy($img);
?>

                                                                           

О выводе изображения в браузер и очистке памяти мы поговорим позже, а пока посмотрим с чем работает imageline.

bool imageline ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $color )
Что есть что вы можете догадаться и сами, или подсмотреть в документации. Там есть.
Я хочу чтоб вы не боялись сделать что-то не то. Смотрите в документацию и вперед.
Еще раз подскажу - если ничего не получается, всегда можно задать вопрос на форуме =)

Функция работает с указателем на изображением в памяти созданным imageCreateTrueColor и идентификатором цвета созданным imageColorAllocate.Ничего сложно? Точно также работает большая часть функций работы с изображениями.Принимает указатель на изображение, цвет и какие-то свои специфические аргументы.

Успеешь попрактиковаться в задачах. А дальше мы рассмотрим пару ключевых функций для работы с изображениями на примерах, чтобы придать тебе уверенности в работе с ними =)

imagecopyresampled

bool imagecopyresampled ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )
Эта функция делает очень простую задачу. Вырезает прямоугольный кусочек из одной картинки, изменяет её размер, сжимает или расширяет, растягивает или сужает и вставляет в новую картинку.
Это одна из самых дофига-аргументных функций и сейчас ты увидишь что даже тут всё очень просто.
resource $dst_image , resource $src_image - откуда и куда. Оба являются указателями на изображения в памяти.
int $dst_x , int $dst_y , int $src_x , int $src_y-как я уже сказал, функция вырезает прямоугольные части. Тут мы обозначаем левый верхний угол нашего прямоугольники в исходном изображении и ту же точку в новом изображении.
int $dst_w , int $dst_h , int $src_w , int $src_h - ширина и высота этого прямоугольника на новом изображении и ширина и высота прямоугольника вырезанного из исходного изображения.

А теперь простыми словами и по русски:
Берем исходную картинку resource $src_image , вырезаем из неё прямоугольник левые верхний угол которого в точке int $src_x , int $src_y а высота и ширина int $src_w , int $src_h. Всё просто?
А теперь этот прямоугольник с изображением сжимаем, растягиваем, сужаем, расширяем так, чтобы его новые длина и ширина соответствовали int $dst_w , int $dst_h .
После чего этот новый прямоугольник вклиниваем на новое изображение в точке int $dst_x , int $dst_y.
У тебя будет возможность попробовать это чудо в действии чуть ближе к завершению.

imagecreatefromgif
Этой функцией или её подобными ты будешь пользоваться часто при работе с изображениями. Функция простая как грабли. Даёшь ей название файла, она тебе выдает указатель на картинку в памяти с которым можно работать.
Обрати вниманием что эта createfromgif. Есть еще и другие форматы и для них уже другие функции. К примеру imagecreatefrompng или imagecreatefromjpeg.

Сохранение обработанного изображение осуществляется при помощи imagegif
Описание гласит imagegif — Output image to browser or file. Для того чтобы примерно понять как это работает, нам понадобится редактор и картинка. Открываем картинку редактором и видим кучу непонятных символов.
Отлично, это наша картинка. Эта функция превращает пиксели в нашей памяти вот в такую запись. Для того чтобы записать всё это в файл указываем в imagegif 2 параметра.Указатель на наше изображение в памяти и название файла.
imagegif($im,'image.gif');

Когда браузер показывает нам какую нибудь картинку, он по сути запрашивает с сервера эти же каракули и превращает их на экране в изображение.
Значит мы можем не только сохранить эти каракули в файл, но и сразу отправить их браузеру. Делает это той-же самой imagegif, но на этот раз без второго параметра.
imagegif($im)

Но есть одно но. Нужно подсказать браузеру что это нужно обработать как картинку, а не как обычный текст. Напомню здесь о заголовках, рассматривавшихся в главе "Где работает php".
Для того чтобы отправить заголовок мы используем функцию header
содержание заголовка будем (тип документа: картинка гиф)
выглядит это вот так: header("Content-type: image/gif");

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

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

Ну вот и всё, теоретическую основу мы освоили..

Типичные ошибки:

Fatal error: Call to undefined function ...
Это значит что у тебя не установлена библиотека GD или всё гораздо проще - ты опечатался в названии функции. Установка GD описывается в документации. В денвере она есть по умолчанию, в убунту вам может пригодится команда sudo apt-get install php5-gd и перезапуск сервера.

Warning: imagecreatefrom..(a.png) failed to open stream: Permission denied
тут всё тоже просто. Правой кнопочкой по нашему изображению и выставьте права на чтение всем.

На экран выводится Resource id # вместо картинки.
=( Я же уже говорил, что вывод в браузер осуществляется при помощи специальных функций вида imagegif() без второго параметра. А у вас где то стоит echo $img; и на экран выводится не содержимое памяти, а просто сообщение что это указатель.

Warning: ...(): supplied argument is not a valid Image resource
Ожидался указатель а то что вы ему передали это строка или что-то другое. Причём если ты уверен что передаёшь указатель, но всё равно получаешь эту ошибку, то перестань припираться. Ты ошибаешься и лучше всё перепроверь . Сэкономит много нервов =)

�PNG  ��� IHDR�����������h6��
PIDAT(����JA��Mv�M4��
Ага, почему то выводится бинарный код изображение а браузер не думал сделать из него изображение, а обработал как обычный текст. Ну-ка пролистай еще раз весь урок и поищи ту часть в которой мы отправляли изображение браузеру.