Using php GD Library to write text over images using TrueType fonts

textPainter class
Once i needed to write text over an image and generate a final image with it.
In order to do it, i used the php GD library functions and a TrueType font as i wanted to use high font sizes.

Now, i have created a PHP class to facilitate all this process.
It is compatible with the following image formats:

  • jpg / jpeg
  • png
  • gif
  • wbmp

And it allows us to positionate the text wherever we want under predefied positions or custom ones.

It is extremely simple to use, see this example:

require_once 'class.textPainter.php';
$img = new textPainter('./imgs/image.jpg', 'Hello world!!', './Franklin.ttf', 50);
$img->show();

That would be all, for the most simple case.

You can find more about this class at my gitHub repository:
Github

View demo

Code for my demo

As an example of how to use it, you can take a look at the code of my demo:

writingOverImageFile.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Floating window with tabs</title>

<style>

/*
This defines the workspace where i place the demo.
*/
#container {
	text-align: left;
	background: #FFF;
	width: 865px;
	margin: 20px auto;
	padding: 20px;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	-moz-box-shadow: 0px 0px 10px #BBB;
	-webkit-box-shadow: 0px 0px 10px #BBB;
	box-shadow: 0px 0px 10px #BBB;
}
</style>
		
</head>
<body>


<div id="container">
	<?php 
		if($_POST["sending"]=="yes"){
			if(strlen($_POST["text"]<50)){
				echo '
					<img id="imgFinal" src="writingOverImage.php?size=50&text='.$_POST["text"].'" />
	
					<img id="imgFinal" src="writingOverImage.php?x=right&y=center&size=30&r=74&g=50&b=170&text='.$_POST["text"].'" />
	
					<img id="imgFinal" src="writingOverImage.php?x=left&y=bottom&size=90&text='.$_POST["text"].'" />
				';
			}
			else{
				echo "The text is too large for my demo!! ";
			}
		}
		else{
			echo '
				<img id="imgFinal" src="writingOverImage.php?size=50&text=Hello world!!" />
			';
			
		}
	?>
	<form name="formulario" action="" method="post" class="contactoFormulario">
		<div class="caja"><input type="text" name="text" />Text you want to write over the image</div>

		<button class="botonFormulario" type="submit" name="Submit" value="Enviar" />Generate image</button>
		<input type="hidden" name="sending" value="yes" />
	</form>
</div>

</body>
</html>

writingOverImage.php

require_once 'textPainter.php';

$x = $_GET["x"];
$y = $_GET["y"];

$R = $_GET["r"];
$G = $_GET["g"];
$B = $_GET["b"];

$size = $_GET["size"];

$text = $_GET["text"];


$img = new textPainter('./imgs/writingOverImage.jpg', $text, './Franklin.ttf', $size);

if(!empty($x) && !empty($y)){
	$img->setPosition($x, $y);
}

if(!empty($R) && !empty($G) && !empty($B)){
	$img->setTextColor($R,$G,$B);
}

$img->show();

Watch Movie Online Logan (2017)

  • AudioVoyeur

    This is really interesting Alvaro! Thank – might have some silly questions as i dive deeper into your example!

  • matt

    I am looking to do something like this on my site for people to test fonts, is there any way they could choose from a number of fonts, and any way the image could be saved and allow them to share it via twitter/facebook/email?

    • Alvaro

      Yeah, of course it is possible. Just add a different font-file depending on the user selection and then in order to download the image you can use a header `header(‘Content-Disposition: attachment; filename=”namePicture.png”‘);` for example.

      Of course, I can not explain all the process here, but it is possible. I would recommend you to use http://stackoverflow.com/ to solve specific doubts.

  • Thanks but this code is faulty.
    imagejpeg($this->img,””,$this->jpegQuality); is wrong -> second parameter.

  • imagejpeg($this->img,””,$this->jpegQuality); does not work 😉

  • Shahbaz Ahmed Bhatti

    i need some help can anybody help me please

  • Domenico

    Hoh can I use shadow text?

  • Tibi Adrian

    Please help me , why I look so … http://2ol.us/scrie/lol.php ?

  • Hi Alvaro… thank a lot for the code.. with your code i have generated a greeting card where users can type their details and create a card.

    but i have a problem here…

    i cannot attach the image in email.

    i want the image in the body of the email.

    and please kindly update the code of yours as ereg_replace is depriciated…

    • Rodrigo Rodrigues

      You will need to save the image, and add this method in the class:

      You will use instead of $img-> show(); use $img-> save (SAVE IMAGE ‘ LOCATION ‘);

      So you just attach the file where the mail goes!

      public function save($locale){

      //creates the text over the background image

      $escrever = imagettftext($this->img, $this->fontSize, 0, $this->startPosition[“x”], $this->startPosition[“y”], $this->textColor, $this->fontFile, $this->text);
      if(!$escrever)

      die(‘não escreveu’);

      switch ($this->format){

      case “JPEG”:

      return imagejpeg($this->img,$locale,$this->jpegQuality);

      break;

      case “PNG”:

      imagepng($this->img,$locale);

      break;

      case “GIF”:

      return imagegif($this->img,$locale);

      break;

      case “WBMP”:

      return imagewbmp($this->img,$locale);

      break;

      default:

      return imagepng($this->img,$locale);

      }

      }

  • Rodrigo Rodrigues

    For those who need to skip rows use the character limit per line:

    $newtext = wordwrap($texto, 30, “n”, false);

    The value is equivalent to the maximum of 30 characters

    • Jona Macho Maza

      I have a lot of problems with wordwrap in this code. Look the text, no align center or justify.
      You can help me?

  • Jona Macho Maza

    Look when i writte more lines… The text is not center and not justify. Can help me?

    $newtext = wordwrap($texto, 15, “n”, false);

    • Alvaro

      Sorry I do not maintain the library anymore.

  • greenland

    at last code u have mentioned as testpainter.php where i can get it please help me to complete

    • Alvaro

      In the article there’s a link to download it. Next to the demo one.