Создание эскизов изображений средствами PHP
Очень часто возникает необходимость создания превью изображений (так называем ThumbImage). В зависимости от специфики проекта, требуется:
1) осуществлять ресайз изображений “на лету”, непосредственно при загрузке страницы;
2) ресайзить изображения при загрузке, создавая одну или несколько тумбочек по заранее заданным параметрам
3) массовый ребилд изображений. Бывает необходим в некоторых случаях, например: каталог товаров формируется с помощью CSV-файла, в котором прописаны пути к оригинальным изображениям. Изображения загружены в специальную папку и от скрипта требуется создать уменьшенные копии оригиналов.
Итак, обзор скриптов и решений.
Smart Image Resizer
Автор: Joe Lencioni
Текущая версия: v1.3.3 (Released April 28, 2008)
Оф.сайт: shiftingpixel.com
Требования:
- PHP
- GD
Описание:
Очень простой в использовании скрипт для ресайза изображений “на лету”.
Работает со следующими графическими форматами: JPEG, GIF, PNG. Достаточно аккуратно обращается с внешним видом картинки – ясность, контраст и т.п. остаются на высоком уровне. Резать старается “по-умному” – предварительно вычислив коэффициент “ширина/высота”. Может заполнять прозрачные области GIF, PNG-изображений заданным цветом. Заботливо складывает отресайзенные изображения в папочку кэша и при наличии кэшированной картинки -выводит именно её, что, конечно же, благоприятно влияет на скорость работы.
Установка:
Очень простая ).
Скачиваем архив: http://shiftingpixel.com/downloads/image-1.3.3.zip.
Извлекаем файл image.php. В директории со скриптом создаем папку “imagecache”.
Используя, например, вот такой вызов картинки, наслаждаемся полученным результатом:
<img alt=”my resized picture” src=”http://example.com/image.php?image=/images/picture.jpg&width=100&height=100? />
Название паки кэша можно поменять в самом скрипте. Путь к директории с картинками, как мы видим, задается непосредственно в URL (в “image=” прописан путь до картинки, начиная с корня сайта).
Пример использования в php-скрипте.
/Название директории с изображениями $dir='product_photo'; //Задаем параметры ресайза, в нашем случае - ширина и высота $imageWidth='150'; $imageHeight='150'; //"$mosConfig_live_site" - глобальная переменная в Joomla (Если используете Joomla), содержит адрес сайта (например, "http://www.example.com") //"$item_image" - это имя файла, которое мы получили из БД или нужно вывести $rgsdimg = $mosConfig_live_site .'/components/com_rgshopdirectory/js/img/image.php?image=/components/com_rgshopdirectory/images/'.$dir.'/'. $item_image .'&width='. $imageWidth .'&height='. $imageHeight.'&cropratio=1:1'; $photo='<img src="'. $rgsdimg .'" title="'.$item_name.'" border="0" />'; // А дальше можем использовать картинку в качестве ссылки, например: $pre_image="<a href=\"$href\">$photo</a>";
ИМХО: простой в использовании скрипт с минимумом возможностей, которых, впрочем, бывает вполне достаточно.
phpThumb()
Автор: James Heinrich
Текущая версия: 1.7.8 (updated: 28-May-2008 )
Оффсайт: http://phpthumb.sourceforge.net
Требования:
- PHP
- GD
- ImageMagick (желательно)
Описание:
Как и Smart Image Resizer, данный скрипт использует GD для создания превью “на лету”, но в отличие от предыдущего подопытного обладает огромным количеством возможностей и настроек. Фактически, это класс для работы с изображениями на все случаи жизни.
Поддерживаемые графические форматы входных файлов:
- JPEG;
- PNG;
- GIF;
- BMP;
- при наличии ImageMagick – любой формат, который поддерживается данной библиотекой
Поддерживаемые графические форматы выходных файлов:
- JPEG;
- PNG;
- GIF;
- BMP (при наличии ImageMagick или phpthumb.bmp.php в наборе скриптов);
- ICO (при наличии ImageMagick или phpthumb.ico.php в наборе скриптов)
Подробное описание возможностей скрипта, которых очень много, доступно на офсайте.
Из особых приятностей: действительно “умная” обрезка изображений, большое количество фильтров для выходных изображений (наложение водяного знака, поворот, тень + множество других).
Огромное количество примеров (демо):
http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.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='<img src="'. $rgsdimg .'" title="'.$item_name.'" border="0" />';
ИМХО: мощный инструмент для работы с изображениями. Работает с максимальным соотношением “возможности/качество/скорость”. Большим плюсом является достаточно полная документация и хороший набор демо-данных (как на оффсайте, так и в архиве со скриптом).
Мы рассмотрели примеры “умных” (в случае phpThumb() – МегаУмных) скриптов, предоставляющих большое число возможностей при работе с изображениями.
Теперь рассмотрим пример “простого” создания превью, но с сохранением результатов ресайза в виде отдельных файлов и организацией набора функций по ресайзу в виде отдельного класса. При необходимости, конечно же, существует возможность использовать те самые “умные” скрипты в составе библиотеки. Но это тема для отдельной беседы).
Простой скрипт ресайза изображений
Постановка задачи:
В таблице с описанием товаров существует поле `product_full_image`, в нем содержаться названия графических файлов.
Сами файлы лежат по адресу “/components/com_virtuemart/shop_image/product/”.
Необходимо: пробежаться по всем записям таблицы и для каждого из существующих изображений создать средний и маленький эскизы.
Нам потребуется: форма с полями ввода размеров эскизов (для простоты будем задавать только ширину требуемого эскиза), функция для первичной обработки данных и сам класс с функциями обработки изображений.
1. Рисуем форму (мне было удобно сделать это внутри отдельной функции):
function ya_kartinko( ){ global $mosConfig_absolute_path, $mosConfig_live_site; echo ' <form action="index.php?option=com_virtuemart&page=shop.browse" method="post"> Ширина мини-эскиза: <br /> <input type="text" class="inputbox" name="small_x" value="100"><br /><br /> Ширина среднего эскиза:<br /> <input type="text" class="inputbox" name="middle_x" value="150"><br /> <input type="hidden" name="resize_pic" value="1"> <br /> <input class="but" type="submit" value="Поехали!"> </form> '; }
После сабмита основной скрипт 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 #__{vm}_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").' завершена.<br />'; } else { //имя файла есть в БД, но физически он отсутствует echo '<span class="alarm">Ошибка. '.$db->f("product_full_image").' не существует.</span><br />'; } }//Закончился перебор по БД }
Файл class.img2thumb.php
В состав функции дополнительно можно включить, например, запись в БД названий полученных эскизов. Также без труда можно использовать приведенный в пример принцип для создания эскизов одного изображения, загружаемого через форму.
shirker
22:12 18.08.2013Максим, откуда берется $newysize?
пришлось добавить
$size=getimagesize($uploadfile);
$x=(int)$size[0]; // ширина
$y=(int)$size[1]; // высота
$file_diag = ( $x/$y );
$newysize_small = ( $small_x/$file_diag );
$newysize_medium = ( $middle_x/$file_diag );