Подписка на RSS-ленту
последние обновления
новостей и публикаций сайта
июня
12

Создание ThumbImage (эскизов изображений) средствами PHP

Рубрика: Web-development

Очень часто возникает необходимость создания превью изображений (так называем ThumbImage). В зависимости от специфики проекта, требуется:
1) осуществлять ресайз изображений “на лету”, непосредственно при загрузке страницы;
2) ресайзить изображения при загрузке, создавая одну или несколько тумбочек по заранее заданным параметрам;
3) массовый ребилд изображений. Бывает необходим в некоторых случаях, например: каталог товаров формируется с помощью CSV-файла, в котором прописаны пути к оригинальным изображениям. Изображения загружены в специальную папку и от скрипта требуется создать уменьшенные копии оригиналов.
Итак, обзор скриптов и решений.

1.Smart Image Resizer
Автор: Joe Lencioni
Текущая версия: v1.3.3 (Released April 28, 2008)
Оф.сайт: hiftingpixel.com

Требования:

Описание:
Очень простой в использовании скрипт для ресайза изображений “на лету”.
Работает со следующими графическими форматами: 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-скрипте.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/Название директории с изображениями
$dir='product_photo';

//Задаем параметры ресайза, в нашем случае - ширина и высота
$imageWidth='150';
$imageHeight='150';

//"$mosConfig_live_site" - глобальная переменная в 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>";

ИМХО: простой в использовании скрипт с минимумом возможностей, которых, впрочем, бывает вполне достаточно.

2. 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 в наборе скриптов)

Подробное описание возможностей скрипта, которых очень много, доступно на офсайте.
Из особых приятностей: действительно “умная” обрезка изображений, большое количество фильтров для выходных изображений (наложение водяного знака, поворот, тень + множество других).

Огромное количество примеров (демо):
http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php

Установка: все также распаковываем архив в какую-либо директорию, папка кэша уже есть в архиве, так что отдельно ее создавать не нужно Возможно, потребуется произвести дополнительную настройку скрипта (например, поправить пути и т.п.) - все зависит от конкретной ситуации использования. Для начала, переименуйте файл “phpThumb.config.php.default” в “phpThumb.config.php” и смотрите уже по результатам отработки скрипта - если в процессе выполнения будут возникать неполадки, скрипт сообщит об этом, показав на месте вывода картинки изображение с текстом ошибки.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
//Название директории с изображениями
$dir='product_photo';

//Задаем параметры ресайза- - ширина, высота, необходимость подрезать изображение
$imageWidth='150';
$imageHeight='150';
$Zoom_Crop='1';

//"$mosConfig_live_site" - глобальная переменная в 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() - МегаУмных) скриптов, предоставляющих большое число возможностей при работе с изображениями.
Теперь рассмотрим пример “простого” создания превью, но с сохранением результатов ресайза в виде отдельных файлов и организацией набора функций по ресайзу в виде отдельного класса. При необходимости, конечно же, существует возможность использовать те самые “умные” скрипты в составе библиотеки. Но это тема для отдельной беседы).

3. Простой скрипт ресайза изображений.
Постановка задачи:
В таблице с описанием товаров существует поле `product_full_image`, в нем содержаться названия графических файлов.
Сами файлы лежат по адресу “/components/com_virtuemart/shop_image/product/”.
Необходимо: пробежаться по всем записям таблицы и для каждого из существующих изображений создать средний и маленький эскизы.
Нам потребуется: форма с полями ввода размеров эскизов (для простоты будем задавать только ширину требуемого эскиза), функция для первичной обработки данных и сам класс с функциями обработки изображений.

1. Рисуем форму (мне было удобно сделать это внутри отдельной функции):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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. Функция, в которую приходят выловленные параметры:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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 'Обработка файла &nbsp;'.$db->f("product_full_image").'&nbsp;завершена.<br />';
        }

        else { //имя файла есть в БД, но физически он отсутствует
            echo '<span class="alarm">Ошибка. &nbsp;'.$db->f("product_full_image").'&nbsp;не существует.</span><br />';
        }
    }//Закончился перебор по БД
}

Файл class.img2thumb.php.

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

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

Комментариев: 2 Комментировать

Отзывов (2) на

Создание ThumbImage (эскизов изображений) средствами PHP

  • Иван | 28 июня 2008 в 2:35

    На мах прочитал весь блог. Спасибо. Сам только начинаю заниматься кодингом. Заставила Joomla 1.5. Расширений катастрофически не хватает. Но надеюсь что за ней будущее. В направлении API Jooml-ы ничего не планируете?

  • 007 | 07 июля 2008 в 2:20

    Ирина если у вас будет время вы бы не могли показать как это сделать именно в библиотеке “Smart Image Resizer”. Я просто не могу разобраться где там формируется имя закешированной картинки что б нему побавить суффикс

У вас есть мнение? Оставьте свой отзыв:

Имя *
Почта *
сайт