Blog. Just Blog

Рамка для фото в виде смартфона

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Рамка для фото в виде смартфона
Рамка для фото в виде смартфона

Для одной презентации понадобилось достаточно большое количество картинок, на которых представлены скриншоты мобильной версии продукта. С самими картинками проблем не возникло, нащелкали на смартфонах сколько надо скриншотов. Согласно поставленной задаче, для пущей убедительности картинки должны быть, так сказать, "в интерьере", то есть как будто отрисованные на экране смартфонов. Конечно, фотошоп никто не отменял, можно было заморочиться и наделать все ручками, но программистское мышление взяло вверх. Как верно подметил герой одного старого мультика, "лучше день потерять, зато потом за пять минут долететь".

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

Изображения для создания рамкиИзображения для создания рамки

Phone.Images.zip (45,887 bytes)

Теперь дело за PHP. Скрипт берет исходную картинку, подгоняет ее по ширине до экрана виртуального смартфона. Затем формируется целевое изображение из верхней и нижней части, средняя часть растягивается до высоты отмасштабированного скриншота. Последним слоем в границы рамки вписывается исходная картинка и готовое изображение сохраняется на диск.
  1. $im=ImageCreateFromJPEG('Screenshot_1.jpg');
  2. // Размеры исходного изображения
  3. $width=ImageSX($im);
  4. $height=ImageSY($im);
  5.  
  6. // Ширина виртуального экрана
  7. $inner_width=427;
  8.  
  9. $coeff=$inner_width/$width;
  10.  
  11. $dst_w=ceil($width*$coeff);
  12. $dst_h=intval($height*$coeff);
  13.  
  14. // Размеры нового изображения
  15. $new_x=482;
  16. $new_y=80+55+$dst_h;
  17.  
  18. // Создать пустое изображение
  19. $dst_im=ImageCreateTrueColor($new_x$new_y);
  20.  
  21. // Верхняя часть изображения
  22. $src1=imagecreatefrompng('image1.png');
  23. $tmp_h1=ImageSY($src1);
  24. ImageCopyResampled($dst_im$src10000,
  25.                    $new_x$tmp_h1$new_x$tmp_h1);
  26. ImageDestroy($src1);
  27.  
  28. // Заполнить среднюю часть изображения
  29. $src2=imagecreatefrompng('image2.png');
  30. $tmp_h2=ImageSY($src2);
  31. $y=0;
  32. while($y<$dst_h) {
  33.     ImageCopyResampled($dst_im$src20, ($tmp_h1+$y), 00,
  34.                        $new_x$tmp_h2$new_x$tmp_h2);
  35.     $y+=$tmp_h2;
  36. }
  37. ImageDestroy($src2);
  38.  
  39. // Нижняя часть изображения
  40. $src3=imagecreatefrompng('image3.png');
  41. $tmp_h3=ImageSY($src3);
  42. ImageCopyResampled($dst_im$src30, (55+$dst_h), 00,
  43.                    $new_x$tmp_h3$new_x$tmp_h3);
  44. ImageDestroy($src3);
  45.  
  46. // Наложить исходное изображение
  47. ImageCopyResampled($dst_im$im286600,
  48.                    $dst_w$dst_h$width$height);
  49. ImageDestroy($im);
  50.  
  51. header("Content-type: image/png");
  52. ImagePNG($dst_im,NULL);
  53.  
  54. ImageDestroy($dst_im);
Скрипт получился простенький, но в таком варианте не универсальный. Некоторые размеры прописаны фиксированными значениями, не выполняется никаких дополнительных проверок, так как все исходные данные заранее известны.

Рамка для фото в виде смартфона
Рамка для фото в виде смартфона

В зависимости от размеров исходной картинки меняется и создаваемое изображение, оно автоматически подгоняется под нужные пропорции. Итоговый результат всех устроил, презентация прошла на отлично. Может быть скрипт пригодится кому-нибудь еще.

Поделиться ссылкой ВКонтакте
Просмотров: 2521 | Комментариев: 4

Метки: PHP, графика
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Дмитрий (17.07.2020 в 16:20):
Здравствуйте!
Спасибо за полезный скрипт. Подскажите пожалуйста, как сохранять финальное изображение с сохранением прозрачности?
Я убрал белый фон, формат png, но при финальном сохранении получается черный фон вместо прозрачного! Буду очень благодарен за подсказку
Алекс (22.12.2018 в 01:32):
Спасибо за идею! Очень полезный блог у Вас!
Ellephant (02.12.2018 в 09:00):
Спасибо за рамочки )

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.09 сек. / MySQL: 2 (0.0062 сек.) / Память: 4.5 Mb
Наверх