adsPlace_1

Войти или Зарегистрироваться

adsPlace_3

Создание эскизов изображений средствами 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”.

Используя, например, вот такой вызов картинки, наслаждаемся полученным результатом:

<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

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

Последние из рубрики

Комментарии(2)

    1. Аватар пользователя shirker

      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 );

      ответить
    2. Аватар пользователя Мария

      Мария

      22:40 28.09.2014

      Спасибо! Просто огроменное спасибо!

      ответить

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению