Наложение текста на изображение по центру на php

Просмотры: 14567
Комментарии: 9
Лайки: 24
Web программирование PHP

Наложение текста на картинку при помощи php не такая уж и сложная задача, главное разобраться с функцией imagettftext(), которая имеет ряд параметров:

Описание

imagettftext(‘Фон или фотка’, ‘Размер шрифта’, ‘Угол наклона’, ‘Координат оп оси X’, ‘Координат оп оси Y’, ‘Цвет шрифта’, ‘Путь к файлу со шрифтом’, ‘Любой текст’)

  • Фон или фотка = imagecreatefromjpeg("images/img.jpg") - (в нашем случае это изображение)
  • Размер шрифта = 22 — 22px
  • Угол наклона = 30 — 30 градусов наклон надписи
  • Координат оп оси Y = 200 — 200 пикселей отступ сверху
  • Координат оп оси X = 100 — 100 пикселей отступ слева
  • Цвет шрифта = imageColorAllocate('Фон или фотка', 255, 255, 255) — возвращает идентификатор цвета, представляющий цвет, составленный из данных RGB-компонентов.
  • Путь к файлу со шрифтом = "fonts_capcha/tahoma.ttf" — тут все понятно
  • Любой текст = 'Тект который мы будем накладывать на фотку'

 

 

Код php наложения текста

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

Обводка на текст при помощи php создается очень просто — нужно всего лишь создать такие же текста функцией imagettftext(), но на 1,2 пикселя смещая координаты.

$imgage_path = "images/img.jpg"; //Путь к изображению
$text = $_GET['text']; //Забираем тест, который мы написали
$img = imagecreatefromjpeg($imgage_path); // создаём новое изображение из файла
$font = "fonts_capcha/tahoma.ttf"; // путь к шрифту
$font_size = 22; // размер шрифта
$color = imageColorAllocate($img, 255, 255, 255); //Цвет шрифта
$shadow = imageColorAllocate($img, 0, 0, 0); // цвет обводки (черный цвет)
$size=getimagesize($imgage_path); //Узнаем размер изображения
$w=(int)$size[0]; // ширина
$h=(int)$size[1]; // высота
// текст по центру 
$box = imagettfbbox($font_size, 0, $font, $text);
$x = ($w/2)-($box[2]-$box[0])/2; //по оси x
$y = ($h/2)-($box[3]-$box[5])/2; //по оси y
//Обводка 
imagettftext($img, $font_size, 0, $x+2, $y, $shadow, $font, $text);
imagettftext($img, $font_size, 0, $x-2, $y, $shadow, $font, $text);
imagettftext($img, $font_size, 0, $x, $y+2, $shadow, $font, $text);
imagettftext($img, $font_size, 0, $x, $y-2, $shadow, $font, $text);
imagettftext($img, $font_size, 0, $x+1, $y, $shadow, $font, $text);
imagettftext($img, $font_size, 0, $x-1, $y, $shadow, $font, $text);
imagettftext($img, $font_size, 0, $x, $y+1, $shadow, $font, $text);
imagettftext($img, $font_size, 0, $x, $y-1, $shadow, $font, $text);
//Разметка самого текста
imagettftext($img, $font_size, 0, $x, $y, $color, $font, $text);
header("Content-type: image/png");
imagepng($img);
imagedestroy($img);

Наложение текста по центру

imagettfbbox() возвращает массив из 8 элементов, представляющих 4 точки, образующие бокс текста:

0- нижний левый угол, X-позиция
1- нижний левый угол, Y-позиция
2- нижний правый угол, X-позиция
3- нижний правый угол, Y-позиция
4- верхний правый угол, X-позиция
5- верхний правый угол, Y-позиция
6- верхний левый угол, X-позиция
7- верхний левый угол, Y-позиция

Разметка на html

Разметку мы делаем для наглядного примера и удобного теста.

<form onsubmit="return false" id="createForm" >
  <div class=""><textarea type="text" name="text" id="textcreate"></textarea></div>
  <div class=""><button onclick="createImage()">Прикрепить</button></div>
</form>
<div id="result"></div>

Javascript функции

function createImage()
{
	var textcreate = $("#textcreate").val();
	$("#result").html("<img src=\"create_image.php?text="+textcreate+"\" />")
}

Спасибо, что долистали до конца!

Поставь лайк и оцени статью, ведь я старался

Напиши комментарий и поделись своим мнением, все ли у тебя получилось, какие сложности возникли или просто напиши спасибо за статью

No rating
4,4(26)

Нужна реализация этого решения на вашем сайте?

Не хотите разбираться с кодом самостоятельно? Я могу установить, настроить и адаптировать решение под ваш сайт или разработать аналогичную функциональность под ваши требования.

Обратиться за помощью

Комментарии

Подписаться
Уведомить о
guest
9 комментариев
Александр
Александр
9 лет назад

Отличный материал, подан просто ясно!
А если можно, то добавте в код строку, чтобы два текста выходило и шрифты разные были, заранее спасибо!

Александр
Александр
9 лет назад
Ответить на  Дмитрий Кисамеев

Правильно ли я добавил:
1 шаг в файл demo.php:

Прикрепить 2

2 шаг в greate_image.php:
imagettftext($img, $font_size, 0, $x+110, $y-110, $color, $font, $text);

Запускаю почему то не работает

Александр
Александр
9 лет назад
Ответить на  Дмитрий Кисамеев

Спасибо!!! Все работает, я дальше по Вашей подсказке и шрифт текста подобрал и цвет. Успехов Вам в работе!

9275099
9275099
7 лет назад

Дмитрий, спасибо вам огромное за полезный материал!!! Подскажите пожалуйста, все сделал как вы написали, все работает, а как и куда добавить кнопку, что бы после генерации картинки с текстом — можно было скачать сформированное фото с сайта?

Матвей
Матвей
7 лет назад

Большое спасибо! Очень помогли!!! Успехов Вам.

аываыва
аываыва
6 лет назад

а сохранить то ее как?

Кисамеев Логотип
Не в сети
Услуги