Главная » Языки программирования

Превью при загрузке php

На чтение 6 мин
Содержание
  1. Создание эскизов изображений средствами PHP
  2. Smart Image Resizer
  3. phpThumb()
  4. Простой скрипт ресайза изображений
  5. 1. Рисуем форму (мне было удобно сделать это внутри отдельной функции):
  6. 2. Функция, в которую приходят выловленные параметры:
  7. Загрузка изображений с превью AJAX + PHP + MySQL
  8. index.php
  9. Скрипт upload_image.php
  10. Промежуточный результат (только загрузка изображений):
  11. Сохранение формы в базе данных
  12. Скрипт save_reviews.php
  13. Скрипт reviews.php
  14. CSS-стили списка:

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

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

”my

Название паки кэша можно поменять в самом скрипте. Путь к директории с картинками, как мы видим, задается непосредственно в URL (в “image=” прописан путь до картинки, начиная с корня сайта).

Читайте также:  Print array key and value php

Пример использования в 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='';

ИМХО: мощный инструмент для работы с изображениями. Работает с максимальным соотношением “возможности/качество/скорость”. Большим плюсом является достаточно полная документация и хороший набор демо-данных (как на оффсайте, так и в архиве со скриптом).

Читайте также:  Insert mysql from java

Мы рассмотрели примеры “умных” (в случае 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 Send Push Notification To Android & IOS using Google FCM Example

Источник

Загрузка изображений с превью AJAX + PHP + MySQL

Загрузка изображений с превью AJAX + PHP + MySQL

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

index.php upload_image.php save_reviews.php reviews.php jquery.min.js uploads/ ├── tmp/

Первое что понадобится: HTML форма и JS скрипт, который после выбора одного или несколькольких файлов отправит их на upload_image.php через AJAX.

index.php

 
Отправить отзыв:
 Ваше имя: Комментарий: Изображения: