Генерация изображений с произвольным текстом — одна из тех задач с которыми часто сталкиваются веб-программисты. В этом уроке я расскажу о том, как просто генерировать изображения с текстом, используя php.
Где используются подобный изображения? Их очень часто можно встретить в социальных сетях: это и демотиваторы с текстом, картинки с «умными» фразами, результаты онлайн тестов, оформленные в виде картинок.
В результате мы получим следующее:
Начнем. В работе мы будем использовать мое дополнение LImageHandler к классу ImageHandler, созданному Yaroslav Pelesh.
Компонент ImageHandler очень прост и позволяет реализовывать такие возможности:
- Изменение размера изображений (resize)
- Создание миниатюр (thumb)
- Наложение водных знаков (watermark)
- Отражение по вертикали и горизонтали (flip)
- Переворачивание (rotate)
- Обрезка (crop)
- Наложение текста
- Изменение размера холста (resize canvas)
- Приведение к оттенкам серого (grayscale)
- Отображение изображения (для генерации «на лету»)
Пример реализации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// Подключаем класс для работы с изображением include_once 'LImageHandler.php'; // Подключаем выбранный шрифт текста $fontPath = 'fonts/font.ttf'; // Путь к оригинальному изображению $imagePath = 'images/original.jpg'; // Указываем размер шрифта $fontSize = 45; // Задаем цвет $colorArray = array(255, 255, 255); // Создаем экземпляр класса LImageHandler $ih = new LImageHandler; // Загружаем изображение $imgObj = $ih->load($imagePath); // Выполняем наложение текста на изображение $imgObj->text('Генерация изображений с текстом', $fontPath, $fontSize, $colorArray, LImageHandler::CORNER_CENTER_TOP, 0, 150); $imgObj->text('Виктор Зинченко', $fontPath, 30, $colorArray, LImageHandler::CORNER_RIGHT_BOTTOM, 50, 50); $imgObj->show(false, 100); |
Разберем его более подробно.
Наложение текста выполняется при помощи вызова метода 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 при таком подходе:
У описанного метода есть один недостаток. Если вы делаете надписи светлым цветом, а в качестве исходного изображения используются светлые картинки, есть вероятность, что текст будет плохо читаемым. Как на этой картинке:
Я эту проблему решаю путем добавления подложки для текста.
Пример реализации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// Подключаем класс для работы с изображением include_once 'LImageHandler.php'; // Подключаем выбранный шрифт текста $fontPath = 'fonts/MintTypeRistrettoProRegular.ttf'; // Путь к оригинальному изображению $imagePath = 'images/original.jpg'; // Указываем размер шрифта $fontSize = 45; // Задаем цвет текста $color = array(255, 255, 255); // Задаем цвет подложки $backgroundColor = array(0, 0, 0); // Создаем экземпляр класса LImageHandler $ih = new LImageHandler; // Загружаем изображение $imgObj = $ih->load($imagePath); // Выполняем наложение текста на изображение $imgObj->textWithBackground('Генерация изображений с текстом', $fontPath, $fontSize, $color, $backgroundColor, LImageHandler::CORNER_CENTER_TOP, 0, 150, 0, 50, 10); $imgObj->textWithBackground('Виктор Зинченко', $fontPath, 30, $color, $backgroundColor, LImageHandler::CORNER_RIGHT_BOTTOM, 50, 50, 0, 30, 10); $imgObj->show(false, 100); |
В этом примере наложение текста с подложкой на изображение осуществляется при помощи метода 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) подложки
Результат:
Очень интересно, а можете привести код полностью? Не знаю как вывести на странице изображение с наложенным текстом.
Роман — нужно что бы была кодировка utf-8 без BOM, тогда нормально работает