Войти Регистрация

Превью картинки на PHP


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

Предположим у нас есть файлы:

Image1.jpg [400x500]

Image2.png [137x400]

Image3.gif [570x200]

А нам необходимо вывести красивые превью размером 200x200, и так чтобы генерировались на лету. Для этого создадим php файл с именем preview: preview.php

И поместим в него данный php код:

<?php
header("Content-type: image/jpeg");
$source=$_GET['src']; //наш исходник
$height=200; //параметр высоты превью
$width=200; //параметр ширины превью
$rgb=0xffffff; //цвет заливки несоответствия
$size = getimagesize($source);//узнаем размеры картинки (дает нам масив size)
$format = strtolower(substr($size['mime'], strpos($size['mime'], '/')+1)); //определяем тип файла
$icfunc = "imagecreatefrom" . $format;   //определение функции соответственно типу файла
if (!function_exists($icfunc)) return false;  //если нет такой функции прекращаем работу скрипта
$x_ratio = $width / $size[0]; //пропорция ширины будущего превью
$y_ratio = $height / $size[1]; //пропорция высоты будущего превью
$ratio       = min($x_ratio, $y_ratio);
$use_x_ratio = ($x_ratio == $ratio); //соотношения ширины к высоте
$new_width   = $use_x_ratio  ? $width  : floor($size[0] * $ratio); //ширина превью 
$new_height  = !$use_x_ratio ? $height : floor($size[1] * $ratio); //высота превью
$new_left    = $use_x_ratio  ? 0 : floor(($width - $new_width) / 2); //расхождение с заданными параметрами по ширине
$new_top     = !$use_x_ratio ? 0 : floor(($height - $new_height) / 2); //расхождение с заданными параметрами по высоте
$img = imagecreatetruecolor($width,$height); //создаем вспомогательное изображение пропорциональное превью
imagefill($img, 0, 0, $rgb); //заливаем его…
$photo = $icfunc($source); //достаем наш исходник
imagecopyresampled($img, $photo, $new_left, $new_top, 0, 0, $new_width, $new_height, $size[0], $size[1]); //копируем на него нашу превью с учетом расхождений
imagejpeg($img); //выводим результат (превью картинки)
// Очищаем память после выполнения скрипта
imagedestroy($img);
imagedestroy($photo);
?>

 

Если вы понимаете как работает данный код генерации php превью, то вы гений! Если нет, то давайте разберёмся поэтапно:

header("Content-type: image/jpeg"); - означает, что данный файл (preview.php) будет jpg картинкой, то есть нашей php превью.

$height=200; $width=200; $rgb=0xffffff;  $source=$_GET['src']; - настройки нашего скрипта, где: высота; ширина; цвет заливки пустоты в превью (0xffffff – белый, 0x000000 – черный, соответственно подбираем под свой стиль сайта); файл ресурса который передается в скрипт GET методом, например: <imgsrc=preview.php?src=image.jpg/>

Следует заметить, что можно передавать значение 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. Если исходное изображение становило 400x300, то его $new_width и $new_height будут становить 200 и 150.

$new_left и $new_top  - это расхождения в пикселях превью размером 200x200 и уменьшенной копии исходника. Например, размер уменьшенной копии будет 200x150, в таком случае $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

Вот его содержимое:

<html><head><title>Sitear.ru</title>
<style>body {background:#FF0;}img {border:3px #F00 solid;}</style>
</head><body>
<img src= preview.php?src=image1.jpg'> 
<img src= preview.php?src=image2.jpg'> 
<img src= preview.php?src=image3.jpg'> 
<img src= preview.php?src=image4.jpg'> 
</body></html>

Сохраним и положим его в папку с нашим файлом 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 кода, просим комментировать. Если скрипт генерации превью картинок на php вам был полезен, милости просим написать спасибо в комментариях.



Дальше: RSS на PHP: Создание RSS ленты на PHP


Дискуссия по теме    45 Комментариев
Добавить комментарий
viktor 06.07.2016 ? 02:37
Здравствуйте. Спасибо за скрипт. У меня есть вопрос. Я написал галерею изображений. В ней привьюшки берутся из папки small, картинке большого размера лежат в папке big и загружаются с помощью ajax при клике на привьюху. Можно ли при добавлении(загрузки) нового изображения автоматически генерировать привьюшку, таким образом как Вы показали, и сохранять ее при этом в папку small? Если да, то подскажите, пожалуйста, как!
Комментарий ожидает проверки администратора
Некто 05.11.2015 в 23:00
Спасибо. На мой взгляд один из самых простых способов наделать превьюшек!
Виктор 12.09.2015 в 05:37
Благодарю, а есть возможность сделать фон прозрачным?
Александр 10.12.2014 в 07:52
Спасибо, скрипт отличный, все работает!)
Алексей 19.11.2014 в 12:18
У меня такая проблема как и у Олега Мачалина... Пришлите и мне 100% рабочий скрипт пожалуйста. мыло: fixmasterby@gmail.com
Евгений 25.08.2014 в 00:20
Скрипт прекрасный. Кроме того, он обрабатывает и внешние фото. Вот по этому поводу и хотелось бы узнать, как изменить эту некрасивую конструкцию URL: preview.php?src=http://site.ru/image1.jpg на более естественный вариант без вопросиков и слешей.
Олег Мачалин 19.03.2014 в 00:53
Картинка отображается так: http://img.ii4.ru/images/2014/03/19/476287_FScreen.jpg http://img.ii4.ru/images/2014/03/19/476288_FScreen.jpg Что я делаю не так?
Тарас 19.03.2014 в 06:47
У вас так: <img src=preview.php?src='image1.jpg'> Должно быть так: <img src='preview.php?src=image1.jpg'>
Олег Мачалин 19.03.2014 в 13:03
Поправил, но все же. http://img.ii4.ru/images/2014/03/19/476340_FScreen.jpg
Тарас 21.03.2014 в 07:04
Дайте свой email. Вышлю вам рабочий файл, который сейчас у меня работает 100%. Возможно там в статье где то поменялся или вырезался символ, при добавлении исходного кода...
Олег Мачалин 23.03.2014 в 03:24
kiberq@gmail.com Заранее благодареню
Тарас 23.03.2014 в 08:40
Отправил Вам email
Станислав 13.01.2014 в 05:12
Классная реализация создания превьюшек. Автору спасибо, все работает.
Григорий 13.07.2013 в 13:00
не работает, картинки не отображаются.
Тарас 13.07.2013 в 14:27
Проверьте правильность прописанного пути к изображению
Григорий 13.07.2013 в 15:47
все пути правильные
Александр 05.04.2013 в 12:25
Спасибо большое, очень помог!
vasiliy 04.02.2013 в 00:02
Прикольно! Как на пхп реализовать анимацию(то есть кнопочку) на которую наводишь а она медлено стает другого цвета. Спасибо за внимание! :)
Екатерина 25.12.2012 в 17:36
Нашла выход.. Ура! Оказывается не хватало оперативки.. увеличила и все заработало при большом размере изображения <?ini_set('memory_limit', '100M');?>
Тарас 26.12.2012 в 01:06
Спасибо что отписались. Теперь есть решение этой проблемы! )
Екатерина 24.12.2012 в 09:59
Исходный размер шириной 3158px На странице вместо картинки надпись: "Изображение не может быть показано, так как содержит ошибки." Изменяю ширину того же изображения на 2500px, все работает..
Екатерина 23.12.2012 в 20:53
Классный скрипт, но одно но.. Если, например, ширина исходного изображения превышает 3000px, тогда выходит ошибка. Подскажите, как исправить этот момент.
Тарас 24.12.2012 в 02:09
Какого рода ошибка? Никогда не использовал изображения такого размера.
Петр 06.06.2012 в 11:31
Ув. Тарас Спасибо за разъяснения. Не можете подсказать, есть ли готовые решения такого типа?
Тарас 09.06.2012 в 19:37
Вот нашел тему на форуме: http://javascript.ru/forum/jquery/18003-zagruzka-otobrazhenie-kartinki-bez-perezagruzki-stranicy-ajax-jquery.html
Saint 25.12.2013 в 08:00
Фу ужас... руки из жопы и бред пишите. почитайте комменты выше . если на столько слабы умом . для этого придумали комменты и обсуждения . код прекрасно работает . --------- Там кто то выше пытается загрузить привью в 3000пх вы че обкурились ? у вас какие мониторы ? вы думаете все будут в кинотеатрах сидеть? ппц... скрипт предназначен для загрузки привью . а тем кому нужен оригинал . сделайте ссылку скачать оригинал . причем привью как по мне уже не привью после того как он превысил размер в 500px. P.s много бреда тут написано . про оперативку девушка добавила правильно у кого хосты простые используйте строку . спасибо за внимание ...
Петр 04.06.2012 в 02:33
Что-то у меня не получается. Мне надо выводить превьюшки, при загрузке файлов для отправки по почте, там есть переменная 'mail_file' в которую помещаются картинки, так вот на экран не выводит, куда надо подставить переменную? И чем выводить превью на экран? Надо приблизительно как вот здесь http://www.avito.ru/additem
Тарас 05.06.2012 в 00:34
Это вовсе не то что вам нужно... чтобы сразу же вывести превью, до отправки письма, нужно использовать jQuery или другую javascript библиотеку.
ganjaeb 30.03.2012 в 16:56
Уважаемый автор, премного благодарен Вам за сей полезный скрипт!
andy 06.03.2012 в 19:21
супер!, спасибо за наводку на GD
Михаил 28.12.2011 в 07:51
Большое спасибо за скрипт. Нашёл его за 5 минут. И всё сразу заработало!!!
elfochka 17.11.2011 в 22:43
Спасибо огромное!!!!
bbb 04.11.2011 в 10:52
Спасибо за скрипт, очень помог!
Тарас 07.10.2011 в 19:30
Александр, для проверки наличия GD, используйте функцию phpinfo(); Выведет информацию об имеющихся библиотеках и их версиях. Если упоминаний о GD нет, то нужно ставить... Как ставить на линакс я не знаю.
Александр 05.10.2011 в 21:02
что-то я не понял есть ли у меня в php библиотека или нет библиотека GD скорее всего нет так как php 5.2 был просто установлен и нечего не добовлялось.. если ещё подскажите как устоновить на линукс убунту библиотеку ценыбы вам небыло)))
Тарас 19.09.2011 в 16:32
font: .8em Arial; - шрифт статьи Рад, что вам понравился мой скрипт превью картинок! Всем спасибо за комментарии.
vitalichek 16.09.2011 в 19:14
Подскажите, пожалуйста, шрифт текста статьи?
vitalichek 16.09.2011 в 17:25
Спасибо большое! Все работает.
onanim 04.08.2011 в 21:16
заработало! большое тебе спасибо за полезный скрипт и внимание, добрый человек
Taras 04.08.2011 в 20:47
Код примера уже обновил, скопировал 1 к 1, вставляю в pic.php В адресной строке пишу... (убедись что comentator.jpg лежит в той папке что и pic.php). http://test/pic.php?src=comentator.jpg ЕЩЕ одно, браузер может кешировать изображения, почисть его, или открой через другой...
onanim 04.08.2011 в 20:37
гмм. действительно, не заметил, что при копировании символы побились. но ошибка осталась. ни при открытии pictures.html ни при обращении к скрипту с указанием картинки в адесной строке вроде http://localhost/phptest/preview.php?src=image1.jpg ничего не получается...
Taras 04.08.2011 в 20:27
Заметил, строка 15 и 16, при копировании ошибка, замени на: $new_width = $use_x_ratio ? $width : floor($size[0] * $ratio); //ширина превью $new_height = !$use_x_ratio ? $height : floor($size[1] * $ratio); //высота превью Спасибо за то что указали на ошибку в коде!!!
Показать более ранние комментарии (3) →
Добавить комментарий
Просмотров: 123418