Содержание
Вообще, сам вопрос несложен. Нет ничего хитрого, чтобы расположить один блок, поверх другого. Но всё-таки, есть и в этом вопросе несколько моментов, достойных обсуждения. Я думаю найдутся люди, кому это будет интересно.
Идея состоит в том, чтобы просто накладывать некоторый текст на изображение. Текст представлен в виде блоков переменной длины, предполагается что он будет расположен с левой стороны, с ровной заливкой вокруг текста. Например, как на этом изображении:
Схема документа
HTML-разметка
Конечно, было бы легче использовать div-элемент для вывода изображения в качестве фонового рисунка, но в данном случае я предполагаю, что изображение — это контент документа, и, следовательно, оно принадлежит HTML. Элемент div будем использовать в качестве контейнера для абсолютного позиционирования текста в нём.
Таким образом, мы разместили текст непосредственно поверх изображения. Следующая наша задача сделать фон для текста. Поскольку элемент
является блочным элементом, то его мы использовать для этих целей не можем. Воспользуемся inline-элементом . Обернём в него текст внутри заголовка.
Будем использовать этот span для оформления текста и фона:
Проблемы
Как видно из рисунка, в конце строки блок текста заканчивается непосредственно после последнего символа в строке, и начинается сразу же по левому краю на следующей строке. Свойство padding для span-а, в данном случае, нам не поможет.
Чтобы решить проблему, необходимо использовать дополнительные span-ы по обе стороны от тега
, в этом случае мы уже сможем воспользоваться padding-ом.
Этим новым span-ам мы зададим свойство padding:
Что на счёт семантики?
На данном этапе дизайн завершен, но при этом осталась одна проблема. А именно, огромное количество дополнительных элементов HTML добавленных только для дизайна. Я имею в виду span-ы. Чтобы решить эту проблему, воспользуемся jQuery. Для этого удалим все span-ы в разметке, и динамически добавим их:
PHP – многофункциональный язык программирования, и мы с вами не один раз в этом убеждались. Сегодня мы немножко поработаем с графикой, а именно – я научу вас наносить нужный вам текст на изображение с помощью этого языка.
Для начала приведу полный код скрипта, который хорошо прокомментирован:
А теперь я расскажу вам о некоторых его нюансах.
1. Переменная $font – обязательно (во избежание ошибок) должна содержать в себе ссылку на файл шрифта. Для примера в конце статьи прикреплен шрифт «Arial».
2. Переменная $pic. Здесь в зависимости от вашего формата изображения используете соответствующую функцию:
PNG – imagecreatefrompng;
JPG – imagecreatefromjpeg;
GIF – imagecreatefromgif.
3. Переменная $color – цвет шрифта в RGB-формате. Черный цвет – «0, 0, 0», белый – «255, 255, 255» и т.д.
4. Функция «imagepng». Здесь вы выбираете ту функцию, в формате которой хотите сохранить изображение:
PNG – imagepng;
JPG – imagejpeg;
GIF – imagegif.
Обратите внимание, что для того, чтобы не происходило перезаписи файлов, в качестве имени файла выступает временная метка Unix. Расширение файла вы прописываете сами в зависимости от выбранной функции сохранения.
Ну вот, вроде, и все, что вам нужно знать, остальные моменты помечены в коде.
Часть «./» означает что чтение и сохранение файлов осуществляется в той папке, где находится ваш скрипт.
Если возникли вопросы – задавайте их в комментариях.
В данной статье расскажу, как можно упростить рутинную работу по созданию однотипных изображений с наложением текста. Этот материал будет полезен тем, кто создает картинки для заставок к видео.
Итак, задача: Генерировать изображение с разрешением 1280х720 по заданному шаблону с наложением текста и фотографией.
Генерация изображения с наложением текста на PHP
Ниже представлен код с комментариями, если что-то непонятно пиши в комментариях, постараюсь ответить
Буду благодарен если поставите лайк для рейтинга, поделитесь в соцмедиа или напишите коммент. Надеюсь, что статья оказалась вам полезной!
Загрузка...
