PHP, Программирование

Генерация изображений с текстом на PHP

Генерация изображений с произвольным текстом — одна из тех задач с которыми часто сталкиваются веб-программисты. В этом уроке я расскажу о том, как просто генерировать изображения с текстом, используя php.

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

В результате мы получим следующее:

1

Начнем. В работе мы будем использовать мое дополнение LImageHandler к классу ImageHandler, созданному Yaroslav Pelesh.

Компонент ImageHandler очень прост и позволяет реализовывать такие возможности:

  • Изменение размера изображений (resize)
  • Создание миниатюр (thumb)
  • Наложение водных знаков (watermark)
  • Отражение по вертикали и горизонтали (flip)
  • Переворачивание (rotate)
  • Обрезка (crop)
  • Наложение текста
  • Изменение размера холста (resize canvas)
  • Приведение к оттенкам серого (grayscale)
  • Отображение изображения (для генерации «на лету»)

Пример реализации:

Разберем его более подробно.

Наложение текста выполняется при помощи вызова метода text(). Он может принимать такие параметры:

  • text — текст для нанесения на изображение
  • fontFile — путь к файлу шрифта текст
  • size — размер шрифта в пикселях
  • color — массив для задания цвета текста. Цифры в нем 225,255,255 соответствуют цветам в палитре RGB (красный зеленый синий). Например, комбинация 255,0,0 дает красный цвет, а 0,255,0 — зеленый.
    corner — для позиционирования текст. Можно принимать такие значения:

    • const CORNER_LEFT_TOP = 1;
    • const CORNER_RIGHT_TOP = 2;
    • const CORNER_LEFT_BOTTOM = 3;
    • const CORNER_RIGHT_BOTTOM = 4;
    • const CORNER_CENTER = 5;
    • const CORNER_CENTER_TOP = 6;
    • const CORNER_CENTER_BOTTOM = 7;
    • const CORNER_LEFT_CENTER = 8;
    • const CORNER_RIGHT_CENTER = 9;
  • offsetX — сдвиг текста по горизонтали (ось X)
  • offsetY = сдвиг текста по вертикали (ось Y)
  • angle — угол поворота текста. От 0 до 360 градусов
  • alpha — прозрачность текста. 0 — непрозрачный, 100 — полностью прозрачный

Метод show() вызывается для отображения изображения без его сохранения. Такой подход иногда называют генерацией изображения «на лету».

Вот пример изображения, сгенерированных в приложении Days при таком подходе:

2

У описанного метода есть один недостаток. Если вы делаете надписи светлым цветом, а в качестве исходного изображения используются светлые картинки, есть вероятность, что текст будет плохо читаемым. Как на этой картинке:

3

Я эту проблему решаю путем добавления подложки для текста.

Пример реализации:

В этом примере наложение текста с подложкой на изображение осуществляется при помощи метода textWithBackground() класса LImageHandler. Он принимает такие параметры:

  • text — текст для нанесения на изображение
  • fontFile — путь к файлу шрифта текст
  • size — размер шрифта в пикселях
  • color — массив для задания цвета текста. Цифры в нем 225,255,255 соответствуют цветам в палитре RGB (красный зеленый синий). Например, комбинация 255,0,0 дает красный цвет, а 0,255,0 — зеленый.
  • bgcolor — массив для задания цвета подложки
  • corner — для позиционирования текст (подробнее в предыдущем примере)
  • offsetX — сдвиг текста по горизонтали (ось X)
  • offsetY = сдвиг текста по вертикали (ось Y)
  • alpha — прозрачность текста. 0 — непрозрачный, 100 — полностью прозрачный
  • bgalpha — прозрачность подложки. 0 — непрозрачный, 100 — полностью прозрачный
  • bgpadding — размер внутреннего отступа (padding) подложки

Результат:

4

Поделитесь с друзьями или сохраните себе
  •  
  •  
  •  
  •  
  •  
  •  
  •  

2 Comments

  1. Роман

    Очень интересно, а можете привести код полностью? Не знаю как вывести на странице изображение с наложенным текстом.

    Reply

Напишите комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


шестнадцать − четырнадцать =