Создавайте динамические изображения с ImageMagick

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

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

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

Ключевым компонентом для придания реалистичности динамическому изображению на вашем сайте является программа манипулирования изображениями, контролируемая кодом, генерирующим ваши веб-страницы. В данной статье в качестве скриптового языка используется язык PHP, однако допускается использование и других языков, таких как Perl и Ruby, при условии, что ваша программа манипулирования изображениями имеет интерфейс прикладного программирования (API) для выбранного языка.

В этой статье я решил использовать ImageMagick по следующим причинам:

• он лучше подходит к услугам веб-хостинга, чем другие пакеты программ;
• он бесплатный;
• он работает на платформах Windows и Linux;
• на протяжении двух десятилетий он непрерывно усовершенствовался, а ошибки устранялись;
• он надежный и мощный, а также предлагает расширенные возможности.

Руководство по загрузке и установке ImageMagick можно найти на веб-сайте www.imagemagick.org.

ImageMagick предлагает большое количество функций, но их управление должно осуществляться из командной строки. Для получения доступа к данным функциональным возможностям с вашего веб-сайта на основе PHP вам понадобится API (как PHP расширение), например MagickWand или imagick. В примерах ниже используются API MagickWand, поэтому для продолжения работы вам понадобится установить его на ваш веб-сервер (так же как и ImageMagick).

Использование различных команд в приложении (в дополнение к команде «Abracadabra»)

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

<?php 
 
// script_1.php
$resource = NewMagickWand();
MagickReadImage( $resource, 'image_1.jpg' );
header( 'Content-Type: image/jpeg' );
MagickEchoImageBlob( $resource );
 
?>

Рисунок 1: Исходное изображение, отображаемое в браузере

Как только вы создаете ресурс MagickWand и загружаете изображение, вы можете узнать информацию об изображении, например размеры:

<?php 
// script_2.php
$resource = NewMagickWand();
MagickReadImage( $resource, 'image_1.jpg');
$width = MagickGetImageWidth( $resource );
$height = MagickGetImageHeight( $resource );
echo "Image size, in pixels, is:  width $width x height $height";
?>

Рисунок 2: Определение размеров изображения

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

Рассмотрим первый вариант. Допустим, ваше приложение собирается отбросить все, что лежит за пределами верхней левой части изображения размером 200х50 пикселей. Верхний левый угол считается офсетом (0,0). Следующий скрипт обрежет шаблон изображения до того, как отобразить его:

<?php 
// script_3.php
$resource = NewMagickWand();
MagickReadImage( $resource, 'image_1.jpg' );
MagickCropImage( $resource, 200, 50, 0, 0 );
header( 'Content-Type: image/jpeg' );
MagickEchoImageBlob( $resource );
?>

Рисунок 3: Обрезанное изображение

Рассмотрим второй вариант. Предположим, что ваше приложение собирается сохранить изображение как есть, но при этом уменьшить его в размере (например, до максимума в 200х200 пикселей). Следующий скрипт изменит размер изображения:

<?php 
// script_4.php
$resource = NewMagickWand();
MagickReadImage( $resource, 'image_1.jpg' );
$resource = MagickTransformImage( $resource, '0х0', '200х200' );
header( 'Content-Type: image/jpeg' );
MagickEchoImageBlob( $resource );
?>

Рисунок 4: Масштабированное изображение

Изображение выше иллюстрирует, как функция MagickTransformImage автоматически сохраняет соотношение размеров изображения при масштабировании.

Также учтите, что MagickTransformImage возвращает трансформированное изображение как новый ресурс, который должен быть прикреплен к переменной, для того чтобы быть сохраненным. И наоборот, предыдущая функция, которую мы рассмотрели, – MagickCropImage – действовала на ресурсной переменной, которая была передана ей; она возвращает логическое значение (TRUE или FALSE). При написании вашего собственного кода MagickWand убедитесь, что вы подтвердили тип возвращаемого функциями значения, поскольку в результате любого неверного предположения вы рискуете потратить большое количество времени на отлаживание программы.

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

<?php 
// script_5.php
$resource = NewMagickWand();
MagickReadImage( $resource, 'image_1.jpg' );
MagickShaveImage( $resource, 20, 0 );
header( 'Content-Type: image/jpeg' );
MagickEchoImageBlob( $resource );
?>

Рисунок 5: Переформатированное изображение

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

<?php 
// script_6.php
$resource = NewMagickWand();
MagickReadImage( $resource, 'image_1.png' );
MagickSetImageFormat( $resource, 'JPEG' );
header( 'Content-Type: image/jpeg' );
MagickEchoImageBlob( $resource );
?>

Рисунок 6: Изображение, конвертированное из формата PNG в формат JPEG

Изображения можно вращать. Предположим, вы хотите повернуть рисунок выше на 45 градусов по часовой стрелке. Нет проблем!

Рисунок 7: Повернутое изображение

В скрипте выше мы не указали цвет, который должен быть использован для областей, которые открылись в результате вращения. Но такая возможность есть:

<?php 
// script_8.php
$resource = NewMagickWand();
MagickReadImage( $resource, 'image_1.jpg' );
MagickRotateImage( $resource, NewPixelWand( 'blue' ), 45 );
header( 'Content-Type: image/jpeg' );
MagickEchoImageBlob( $resource );
?>

Рисунок 8: Повернутое изображение с голубым фоном

Достаем кролика из шапки

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

<?php 
// script_9.php
set_time_limit( 60 * 5 );
$resource = NewMagickWand();
MagickReadImage( $resource, 'image_1.jpg' );
MagickRotateImage( $resource, NewPixelWand( 'blue' ), 45 );
MagickWriteImage( $resource, 'new_image.jpg' );
?>

Вы обнаружите еще одно изменение: set time limit устанавливает тайм-аут скрипта в секундах (в данном случае до пяти минут). Это мера предосторожности может быть полезна при условии, что ваш скрипт может обрабатывать изображения, размер которых может превысить установленный по умолчанию тайм-аут скрипта для вашего веб-сервера. Несколько полезных советов

Если вы хотите узнать больше о пакете программ ImageMagick, воспользуйтесь книгой Майкла Стилла (Michael Still) “The Definitive Guide to ImageMagick” (ISBN 1590595904), выпущенной в декабре 2005 года издательством Apress. В ней содержится подробное описание, как установить и конфигурировать ImageMagick дня некоторых дистрибутивов Linux, а также Microsoft Windows. В главах книги вы найдете информацию об основах манипулирования и сжатия изображений, вспомогательных программах ImageMagick, художественной трансформации и других типах трансформации изображений, командах рисования и другие метаданные. В конце книги находятся примеры, в которых ImageMagick используется внутренними программами, написанными на языке Perl, C, Ruby и PHP.

На веб-сайте ImageMagick содержится некоторая документация. Для каждых десяти программ командной строки ImageMagick сайт предлагает страницу, которая кратко объяснит задачу программы, предоставит примеры ее использования и список всех опций командной строки. Для каждой опции существует страница с более подробным описанием. Более того, одна из страниц сайта посвящена доступным интерфейсам прикладного программирования (API) ImageMagick, для 11 различных языков программирования, в том числе PHP, Perl и Java.

Чтобы узнать больше о пакете программ ImageMagick и его командах, загрузите онлайн инструкцию. Она находится в формате HTML Help Compiled. Для imagick как API существует меньше ресурсов, при этом в основном они содержат образец кода из каталога примеров в пределах загружаемого пакета.

Многие программисты и веб-разработчики считают, что изучение работающего кода – это самый эффективный способ изучения новой технологии, и ImageMagick не является исключением. Кодовые фрагменты выше иллюстрируют фундаментальные операции с изображениями. Для того чтобы узнать, как осуществлять более сложные операции, ознакомьтесь с примерами использования ImageMagick Энтони Тиссена (Anthony Thyssen).

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