Создание эскизов изображений средствами PHP
Очень часто возникает необходимость создания превью изображений (так называем ThumbImage). В зависимости от специфики проекта, требуется:
1) осуществлять ресайз изображений “на лету”, непосредственно при загрузке страницы;
2) ресайзить изображения при загрузке, создавая одну или несколько тумбочек по заранее заданным параметрам
3) массовый ребилд изображений. Бывает необходим в некоторых случаях, например: каталог товаров формируется с помощью CSV-файла, в котором прописаны пути к оригинальным изображениям. Изображения загружены в специальную папку и от скрипта требуется создать уменьшенные копии оригиналов.
Итак, обзор скриптов и решений.
Smart Image Resizer
Автор: Joe Lencioni
Текущая версия: v1.3.3 (Released April 28, 2008)
Оф.сайт: shiftingpixel.com
Очень простой в использовании скрипт для ресайза изображений “на лету”.
Работает со следующими графическими форматами: JPEG, GIF, PNG. Достаточно аккуратно обращается с внешним видом картинки – ясность, контраст и т.п. остаются на высоком уровне. Резать старается “по-умному” – предварительно вычислив коэффициент “ширина/высота”. Может заполнять прозрачные области GIF, PNG-изображений заданным цветом. Заботливо складывает отресайзенные изображения в папочку кэша и при наличии кэшированной картинки -выводит именно её, что, конечно же, благоприятно влияет на скорость работы.
Скачиваем архив: http://shiftingpixel.com/downloads/image-1.3.3.zip.
Извлекаем файл image.php. В директории со скриптом создаем папку “imagecache”.
Используя, например, вот такой вызов картинки, наслаждаемся полученным результатом:
Название паки кэша можно поменять в самом скрипте. Путь к директории с картинками, как мы видим, задается непосредственно в URL (в “image=” прописан путь до картинки, начиная с корня сайта).
Пример использования в php-скрипте.
ИМХО: простой в использовании скрипт с минимумом возможностей, которых, впрочем, бывает вполне достаточно.
phpThumb()
Автор: James Heinrich
Текущая версия: 1.7.8 (updated: 28-May-2008 )
Оффсайт: http://phpthumb.sourceforge.net
Как и Smart Image Resizer, данный скрипт использует GD для создания превью “на лету”, но в отличие от предыдущего подопытного обладает огромным количеством возможностей и настроек. Фактически, это класс для работы с изображениями на все случаи жизни.
Поддерживаемые графические форматы входных файлов:
- JPEG;
- PNG;
- GIF;
- BMP;
- при наличии ImageMagick – любой формат, который поддерживается данной библиотекой
Поддерживаемые графические форматы выходных файлов:
- JPEG;
- PNG;
- GIF;
- BMP (при наличии ImageMagick или phpthumb.bmp.php в наборе скриптов);
- ICO (при наличии ImageMagick или phpthumb.ico.php в наборе скриптов)
Подробное описание возможностей скрипта, которых очень много, доступно на офсайте.
Из особых приятностей: действительно “умная” обрезка изображений, большое количество фильтров для выходных изображений (наложение водяного знака, поворот, тень + множество других).
Огромное количество примеров (демо):
Установка: все также распаковываем архив в какую-либо директорию, папка кэша уже есть в архиве, так что отдельно ее создавать не нужно Возможно, потребуется произвести дополнительную настройку скрипта (например, поправить пути и т.п.) – все зависит от конкретной ситуации использования. Для начала, переименуйте файл “phpThumb.config.php.default” в “phpThumb.config.php” и смотрите уже по результатам отработки скрипта – если в процессе выполнения будут возникать неполадки, скрипт сообщит об этом, показав на месте вывода картинки изображение с текстом ошибки.
Пример использования в php-скрипте.
Пример очень похож на предыдущий. Разница лишь в формировании URL-а изображения и наборе передаваемых параметров
//Название директории с изображениями $dir='product_photo'; //Задаем параметры ресайза- - ширина, высота, необходимость подрезать изображение $imageWidth='150'; $imageHeight='150'; $Zoom_Crop='1'; //"$mosConfig_live_site" - глобальная переменная в Joomla(Если используете Joomla), содержит адрес сайта (например, "http://www.example.com") // "$item_image" - это имя файла, которое мы получили из БД или нужно вывести $rgsdimg = $mosConfig_live_site .'/components/com_rgshopdirectory/js/img/phpThumb.php?src=../../images/'.$dir.'/'. $item_image .'&w='. $imageWidth .'&h='. $imageHeight . $zc .'&q=100'; $photo='';
ИМХО: мощный инструмент для работы с изображениями. Работает с максимальным соотношением “возможности/качество/скорость”. Большим плюсом является достаточно полная документация и хороший набор демо-данных (как на оффсайте, так и в архиве со скриптом).
Мы рассмотрели примеры “умных” (в случае phpThumb() – МегаУмных) скриптов, предоставляющих большое число возможностей при работе с изображениями.
Теперь рассмотрим пример “простого” создания превью, но с сохранением результатов ресайза в виде отдельных файлов и организацией набора функций по ресайзу в виде отдельного класса. При необходимости, конечно же, существует возможность использовать те самые “умные” скрипты в составе библиотеки. Но это тема для отдельной беседы).
Простой скрипт ресайза изображений
Постановка задачи:
В таблице с описанием товаров существует поле `product_full_image`, в нем содержаться названия графических файлов.
Сами файлы лежат по адресу “/components/com_virtuemart/shop_image/product/”.
Необходимо: пробежаться по всем записям таблицы и для каждого из существующих изображений создать средний и маленький эскизы.
Нам потребуется: форма с полями ввода размеров эскизов (для простоты будем задавать только ширину требуемого эскиза), функция для первичной обработки данных и сам класс с функциями обработки изображений.
1. Рисуем форму (мне было удобно сделать это внутри отдельной функции):
function ya_kartinko( ) < global $mosConfig_absolute_path, $mosConfig_live_site; echo ' Ширина мини-эскиза:
Ширина среднего эскиза:
'; >
После сабмита основной скрипт shop.browse.php отлавливает параметры формы и передает в нижеописанную функцию значения $small_x и $middle_x
2. Функция, в которую приходят выловленные параметры:
function resize_kartinko($small_x, $middle_x) < global $mosConfig_absolute_path, $mosConfig_live_site; //Подключаем класс обработки изображения include( CLASSPATH . "class.img2thumb.php"); //Коннект с БД $db = new ps_DB; $q = "SELECT product_sku, product_full_image " ; $q .= "FROM #___product "; $db->query($q); while ( $db->next_record()) < //Начинаем перебор if($db->f("product_full_image")) < $filename = $mosConfig_live_site."/components/com_virtuemart/shop_image/product/".$db->f("product_full_image"); if (file_exists( $_SERVER['DOCUMENT_ROOT'].'/components/com_virtuemart/shop_image/product/'.$db->f("product_full_image"))) < //если файл существует $fileinfo = pathinfo( $filename ); $file = str_replace(".".$fileinfo['extension'], "", $fileinfo['basename']); $ext = ".jpg"; //Формируем имена выходных файлов, путем добавления к имени исходного файла сууфикса "_small" или "_middle" $fileout_small = $mosConfig_absolute_path."/components/com_virtuemart/shop_image/product/resized/".$file."_small".$ext; $fileout_middle = $mosConfig_absolute_path."/components/com_virtuemart/shop_image/product/resized/".$file."_middle".$ext; $maxsize = false; $bgred = 255; $bggreen = 255; $bgblue = 255; // создаем экземпляры класса. По сути - передаем все необходимые данные для создания эскизов $new_image_small = new Img2Thumb($filename,$small_x,$newysize,$fileout_small,$maxsize,$bgred,$bggreen,$bgblue); $new_image_middle = new Img2Thumb($filename,$middle_x,$newysize,$fileout_middle,$maxsize,$bgred,$bggreen,$bgblue); echo 'Обработка файла '.$db->f("product_full_image").' завершена.
'; > else < //имя файла есть в БД, но физически он отсутствует echo 'f("product_full_image").' не существует.
'; > >//Закончился перебор по БД > В состав функции дополнительно можно включить, например, запись в БД названий полученных эскизов. Также без труда можно использовать приведенный в пример принцип для создания эскизов одного изображения, загружаемого через форму.
Превью картинки на PHP
Вам нужно создать превью картинки на PHP, но вы не знаете как это реализовать. Давайте сейчас попробуем разобраться. Итак, для написания превью нам необходимо, что бы была установлена библиотека GD на вашем PHP, но это не так страшно как звучит, так как данная библиотека функций стандартно установлена на хостингах и локальных серверах, таких как Denver и других.
Предположим у нас есть файлы:
А нам необходимо вывести красивые превью размером 200×200, и так чтобы генерировались на лету. Для этого создадим php файл с именем preview: preview.php
И поместим в него данный php код:
Если вы понимаете как работает данный код генерации php превью, то вы гений! Если нет, то давайте разберёмся поэтапно:
header(«Content-type: image/jpeg»); — означает, что данный файл (preview.php) будет jpg картинкой, то есть нашей php превью.
$height=200; $width=200; $rgb=0xffffff; $source=$_GET[‘src’]; — настройки нашего скрипта, где: высота; ширина; цвет заливки пустоты в превью (0xffffff – белый, 0x000000 – черный, соответственно подбираем под свой стиль сайта); файл ресурса который передается в скрипт GET методом, например:
Следует заметить, что можно передавать значение src также таким образом: preview.php?src=http://site.com/image.jpg если исходник вашей превью лежит на другом сайте, хостинге.
$format = strtolower(substr($size[‘mime’], strpos($size[‘mime’], ‘/’)+1));
$icfunc = «imagecreatefrom» . $format;
if (!function_exists($icfunc)) return false;
Этими строками мы создаем название функции соответственно расширению файла исходника превью. Например, файл photo.jpg, в таком случае $icfunc будет иметь значение imagecreatefromjpg. Если же вы передадите в скрипт ресурс типа photo.blablabla, то сработает проверка if (!function_exists($icfunc)) returnfalse; и возвратит FALSE.
Далее идут вычисления размеров уменьшенной копии исходника, где $new_width и $new_height , это ширина и высота превью пропорциональная исходному изображению, но не превышающая параметров $height=200; $width=200; . Это значит, что одна из сторон будут 200 пикселей, другая пропорциональная изображению, но меньше 200. Если исходное изображение становило 400×300, то его $new_width и $new_height будут становить 200 и 150.
$ new _ left и $ new _ top — это расхождения в пикселях превью размером 200 x 200 и уменьшенной копии исходника. Например, размер уменьшенной копии будет 200 x 150, в таком случае $ new _ left равен 0, а $ new _ top равен 25. То есть нам нужно отступить на 25 пикселей сверху превью размером 200 на 200, что бы уменьшенная копия высотой в 150 была по центру. Это хорошо видно на картинке ниже.
$img = imagecreatetruecolor($width, $height); imagefill($img, 0, 0, $rgb); — создаем вспомогательное изображение $img размеры которого соответствуют параметрам нашего php превью и заливаем его цветом указанным параметром $rgb.
$photo = $icfunc($source); — открываем исходник, если имя файла будет image.jpg, то данную строку можно записать таким образом: $photo = imagecreatefromjpg(“image.jpg”); Но мы написали гораздо грамотнее, где $icfunc , если вы помните это вычисление функции по расширению исходного файла нашей превью.
imagecopyresampled($img, $photo, $new_left, $new_top, 0, 0, $new_width, $new_height, $size[0], $size[1]);
Копируем и уменьшаем исходник на «новосотворенную» превью, с учетом расхождений в размерах пропорциональной уменьшенной копии и желаемого размера картинки превью.
imagejpeg($img); — собственно публикуем (выводим) то, что получилось.
imagedestroy($img); imagedestroy($photo); — очищаем оперативную память после вывода (публикации) нашей превью.
Ура мы написали файл, который будет сходу генерировать превью картинки. Теперь давайте посмотрим, что у нас получилось. Для проверки создадим файл: pictures.html
body img
Сохраним и положим его в папку с нашим файлом preview.php и четырьмя исходниками картинок. У меня вот, что получилось:
Если поиграть со строкой imagecopyresampled ($ img , $ photo , $ new _ left , $ new _ top , 0, 0, $ new _ width , $ new _ height , $ size [0], $ size [1]); и вместо $ new _ top поставить 0, или $ new _ top *2 , то можно выровнять уменьшенные копии картинок по верхней или по нижней границе превью. Вот что у меня получилось:
Таким же образом можно изменять положение копии на превью, меняя параметр $new_left аналогичным образом. Или если вас смущают данные расхождения, и вам нужны просто маленькие копии картинок пропорциональные большим изображениям, то известные строки php кода будут выглядеть таким образом:
$img = imagecreatetruecolor($new_width,$new_height); — создастся изображение пропорциональное исходному, а не 200 на 200. То есть $img будет 200 на 150, согласно выше описанному примеру.
imagecopyresampled ($ img , $ photo , 0, 0, 0, 0, $ new _ width , $ new _ height , $ size [0], $ size [1]); — так будет выглядеть строка копирования и уменьшения исходной картинки.
Вот так получилось у меня. На этом наша статья завершается. Пробуйте и наслаждайтесь результатом своих трудов. Как видите создать превью картинки на php не так уж и сложно, если разобраться. Если есть лучшие варианты реализации данного php кода, просим комментировать. Если скрипт генерации превью картинок на php вам был полезен, милости просим написать спасибо в комментариях.