Как в PHP наложить текст с CSS стилем на картинку?

Question

[Дмитрий]

Подскажите кто знает, если у меня есть дизайн-макет с фоном и слоями текста, которые нужно оформить CSS-стилем и динамически накладывать разный текст в одном этом стиле на фон, и делать таким образом разные картинки, каким образом это лучше всего делать на стороне PHP?

Мне интересен пример реализации, например, того же risovach.ru/mem-generators - вот как это сделано? Есть картинка, есть текст. Они на сервере накладывают этот текст и выдают картинку. Мне по сути надо так же, только текст с CSS-стилем. Понятно, что если сделать шрифт в нужном стиле, то подойдёт обычная GD. У них наверное именно так. Но мне нужна именно поддержка CSS чтобы я мог легко вносить изменения и не приходилось перерисовывать шрифт.

Answer 1

[Александр Талалаев]

Нет, это делается не таким образом.
Работа с изображениями в php через специальный библиотеки GD/ImageMagick.
Но чтобы не возиться самому с велосипедо строением, лучше уже использовать готовые обертки.
Я советую image.intervention.io, у них отличная документация, широкие возможности по манипуляциям с изображениям, фильтры, кропы, эффекты и тд и тп. В том числе и работа с текстом, поддержка шрифтов.
Если уж хочется именно css/html шаблоны, то есть библиотека https://github.com/niklasvh/html2canvas , но тут уже вам стоит разделить логику и отображение. Мы у себя успешно использовали эту библиотеку для реализации генерации баннеров автоматически под нужный размер, используя адаптивную верстку. Сама библиотека не идеал, на практике бывают всплывают косяки и проблемы, но думаю для вашей задачи более чем подойдет.

Comments

[Дмитрий]

Спасибо. Судя по описанию это как раз то что мне нужно. Пошёл настраивать.

Answer 2

[Александр Аксентьев]

все что можно сделать на css делается на css.

Если у вас просто блоки с фоном, а не мемасики, то это делается на html/css.
Текст текстом на странице, а не на картинке.

Т.е. надо верстать макет, а не резать и вставлять картинками(sushiwhite.ru/sets/)

Comments

[Дмитрий]

Я что, не ясно объяснил задачу? Вы читать умеете? Я прекрасно понимаю что и как делается. Мне нужно динамически обновлять картинку там, где я могу вставить только картинку. Нельзя добавить никакой CSS или PHP-код. Только картинку. А на картинке мне нужен изменяющийся текст в определённом стиле c периодом каждую минуту.

[Александр Аксентьев]

Дмитрий, не умею читать, из текста непонятно вам надо генерировать в итоге или просто делать вёрстку чтобы "легко менялся текст".

На сервере никаких css у вас не будет при генерации. Только эффекты которые сможет ImageMagick.

динамически обновлять картинку там, где я могу вставить только картинку

так бы сразу и написали.

Мне по сути надо так же, только текст с CSS

Но мне нужна именно поддержка CSS чтобы я мог легко вносить изменения и не приходилось перерисовывать шрифт.

Звучит как "нужна вёрстка блока с картинкой фоном".

[Дмитрий]

Александр Аксентьев, Ну извините что я не правильно выразился. В общем мне хочется иметь на сервере функционал, позволяющий с высокой интенсивностью менять картинку, добавляя к ней нужный мне текст (например - время последнего обращения к сайту. или системное время). А CSS-форматирование хочу применять, потому что текст меняется и мне нужно сохранить стиль дизайна при этом.

[Александр Аксентьев]

Дмитрий, css надо конвертировать в эффекты которые умеет накладывать модуль для работы с графикой в любом случае. Не будет сервер css применять, он не в курсе что это такое.

ДЛя работы с целом Intervention Image вполне годная либа.
Но она не умеет нормально работать с текстом(не работает как заявлено в доке или не так хорошо как хочется)

С текстом очень хорошо и удобно работать через https://github.com/stil/gd-text
И при этом можно совместить удобство работы с картинками из Intervention и работу с текстом из gd-text.
Они нормально вместе работают.
Там есть несколько функций для украшения, но это далеко от css.