Преобразование объявления в графическую файл карточку jpg формата

+21
2.57K
Вот тут человек просил инструкцию на русском языке.

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

Самого заинтересовал этот вопрос, сначала подумал про canvas, потом понял, что для этой задачи можно по-проще вариант, поэтому немного разобрался в том как работают функции

imagefilledrectangle
imagettftext
imagecopymerge
и так далее.

Итак, генерация изображения с содержимым объявления.



0. Создаём папку /cards в директории images/board/

1. В components/board/fronted.php

перед

  1. cmsPage::initTemplate('components', 'com_board_item')->
+

  1. //генерируем карточку
  2. if(!file_exists('images/board/cards/'.$item['id'].'.jpg')){
  3.  
  4. $im = imagecreatetruecolor(500, 300); //ширина и высота картинки
  5. $border = imagecolorallocate($im, 203, 222, 240); //цвет рамки в формате RGB
  6. $bg = imagecolorallocate($im, 223, 235, 246); //цвет основного фона
  7. $black = imagecolorallocate($im, 0, 0, 0); //цвет текста
  8. imagefilledrectangle($im, 0, 0, 499, 299, $border); //рисуем основную подложку с цветом рамки, координаты слева верх, слева низ, справа верх, справа низ
  9. imagefilledrectangle($im, 20, 20, 479, 279, $bg); //основное поле с отступами от краев, благодаря которым будет эффект рамки, координаты слева верх, слева низ, справа верх, справа низ
  10. $cardtext = substr($item['content'], 0, 600); //получаем текст для картинки, обрезаем до 600 знаков
  11. $cardtext = wordwrap($cardtext, 80); //максимальная длина строки 80 символов после чего строка переносится, слова не разбиваются
  12. $cardtext .= '...'; //добавляем в конец текста многоточие
  13. $font = 'components/board/arial.ttf'; //указываем путь к шрифту, не забываем положить сам файл шрифта в указанное место
  14.  
  15. $cardtext = str_replace('<br />', '', $cardtext); //вырезаем тег переноса из текста, иначе он будет печататься на картинку
  16.  
  17. imagettftext($im, 13, 0, 30, 40, $black, $font, $cardtext); //рисуем из текста картинку: файл, размер шрифта, угол в градусах, координаты начала текста по x оси, по y оси, вет текста, файл шрифта, текст
  18.  
  19. //наносим водяной знак, если он не нужен три следующие строки можно удалить.
  20. $stamp = imagecreatefromjpeg('images/watermark.jpg'); // Здесь указан путь к файлу водяного знакоа в формате jpg
  21. imagecopymerge($im, $stamp, 270, 250, 0, 0, 199, 28, 60); //наносим водяной знак: исходный файл, файл водяного знака, отступ слева, отступ сверху, 0,0 - отсутствие смещений в координатах на самом файле водяного знака, ширина файла ВЗ, высота ВЗ, прозрачность ВЗ
  22. imagedestroy($stamp); //удаляем файл водяного знака из памяти
  23.  
  24. imagejpeg($im, 'images/board/cards/'.$item['id'].'.jpg'); //готовую карточку в папку images/board/cards. Каждое изображение имеет номер который совпадает с номером объявления.
  25.  
  26. imagedestroy($im); //очищаем память от изображения карточки
  27.  
  28. }
  29.  
  30. $item['card'] = '/images/board/cards/'.$item['id'].'.jpg';
Максимально подробно прокомментировал для тех, кто будет подгонять всё это дело под себя.

2. В файле components/board/model.php
добавим строку которая будет удалять карточку при удалении объявления

после

  1. @unlink(PATH.'/images/board/'.$item['file']);
  2. @unlink(PATH.'/images/board/small/'.$item['file']);
  3. @unlink(PATH.'/images/board/medium/'.$item['file']);
+

  1. //удаляем карточку объявления
  2. @unlink(PATH.'/images/board/cards/'.$item['id'].'.jpg');


3.В настройках кнопки "поделиться" указываем путь до картинки как '/images/board/cards/ТУТ-НОМЕР-ОБЪЯВЛЕНИЯ.jpg

Например, если речь идет о кнопке "поделиться" от Яндекса, которая вставлена в шаблон компонента объявления com_board_items.tpl

  1. <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
  2. <script src="//yastatic.net/share2/share.js"></script>
  3. <div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir" data-image="{$item.card}"></div>
на картинку здесь указывает вот это: data-image="{$item.card}"

Карточка сгенерированная при тех параметрах которые я указал в коде выше, выглядит вот так


Иллюстрация
Олег Васильевич я Олег Васильевич я 7 лет назад #
Комментарий удален
0
Helg Helg 7 лет назад #
rofl
+1
Loadырь Loadырь 7 лет назад #
Олег Васильевич я, для этих целей достаточно перевернуть монитор и запустить заново.
0
Нил™ Нил™ 7 лет назад #
предлагаете парсить объявления из картинок с парсенными объявлениями? Ну надо подумать, хотя вон тут уже предлагают решение.
0
Димитриус Димитриус 7 лет назад #
ИМХО, Может лучше реализовать "налету" по запросу картинки сразу картинку и скармливать без создания файла на сервере. как минимум меньше движений с файлами на сервере.
0
Нил™ Нил™ 7 лет назад #
что бы скормить картинку нужно указать ссылку на нее. Если генерировать картинку на лету без сохранения на сервере, как будет выглядеть урл картинки? data:img? Не проверял конечно, но вряд ли социальная сеть примет такой адрес.
0
Нил™ Нил™ 7 лет назад #
и возникает вопрос: что считать инициализацией запроса картинки? блок поделиться сторонний скрипт, не знаю наверно можно как то повесить на клик по кнопке "поделиться" ещё и генерировать картинку по этому клику, но вряд ли все эти танцы имеют смысл. 1 раз сгенерировать и сохранить картинку и один раз удалить её при удалении объявления, не так уж много действий)
+1
Димитриус Димитриус 7 лет назад #
1.указать заголовок
Header("Content-type: image/jpeg");
2. Вывести картинку imagejpeg без 2 параметра
3. через реварайт генерить ссылку с jpg на конце

Еще от автора

Капча на сайт или разделы сайта
Если нужно, закрыть весь сайт или некоторые его разделы каптчей.
Пинг поисковых систем для первой ветки
Небольшая интеграция инструментов для пингования, чтобы сделать его чуть удобнее
Генератор карты сайта в формате txt на лету без крона
Вообще то где то тут уже есть вполне рабочие генераторы карты для первой ветки, но этот вариант тоже имеет право быть.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.