Adding text to images in real time with PHP

  • PHP
  • February 12, 2008

Using PHP and the GD library the task of manipulating images, editing them and even adding text before presenting it to the user becomes a simple feat. Since I had to make use of this tool recently while making “on-the-fly” cupons for a client, i decided to write this article showing how easy this can be done.

First Steps

Attention: verify that the GD library is installed using a phpinfo() command.

There are a few ways of outputting the image after finishing the process, for example:

  • Save the file to disc
  • Output image on screen (as an image, inside the HTML)
  • Output to screen (just the image code)

In this example we are going to output the image to a tag inside the HTML code, but for this we must understand a little about how this structure fits together. Generally an image tag points to a “.jpg” or “.gif” file, but here we need it to point to a “.php” file. This file will be responsible for seeking the image, editing it (insert text) and outputting the raw image code that will be read by the tag.

So as a result we will have three files: the main.php file, that will output our HTML code, the image.php file that will edit and output the image, and a img.jpg that will be our base image that we will add text to.


This is a simple and straight-through file with an image tag. The only twist here is that in the image src attribute we will include (via GET) the name that should be written on the image.

Get your certificate below<br>

<img src="imagem.php?nome=Rafael%20Dohms" alt="" />


This is where the magic begins, this file should retreive the original image, the input text, and join the two, outputting the image with the text in it. So let’s go at it step by step.

The first step is to load the image into a PHP resource, basically loading it into the memory. PHP has a few functions for this, depending on the image’s format: ImageCreateFromJPEG , ImageCreateFromGIF and so on …

$rImg = ImageCreateFromJPEG( "ex-img.jpg" );

Now comes the time to write the text to the image, but first we need to get some parameters ready. There are basically two ways to write text on an image, one char at a time or a whole string at once (imagechar ou imagestring ). In our example we will use the string method, but both receive the same parameters varying only on the text to be written. Before invoking the mothod we should setup the color to be used.

To do this we use the imagecolorallocate that receives as values the image resource and the color in RGB format (3 numbers) . In this case we use a black color:

$color = imagecolorallocate($rImg, 0, 0, 0);

Now we can begin writing. The function imagestring receives these parameters, in this order:

  • image: the image resource
  • font: an interger, from 1 to 5 (default PHP font, the bigger the numb, the bigger the font size) or a system font
  • x: horizontal shift (coordinate)
  • y: vertical shift (coordinate)
  • string: text to be written
  • color: variable with the allocated color

Note that the x and y coordinates are relative to the top left of the image. Also, for this example we will be using the default PHP font, but generally any TTF font will do, as i’ll describe towards the end of the article.

This is our base image:

Basically, I’ll write my name in the reserved spot, taking all this into account I can calculate the coordinates removing 2 or 3 pixels from the top because of the font overhead. The text should also be urldecoded and then on to the function that looks like this:

imagestring( $rImg,5,126,22,urldecode($\_GET\['nome'\]),$cor );

Before we finish up we have to define our content-header indicatig that our content is a JPG image, and then we can output the image code using the imageJPEG, that will spit out our raw image code. This function can also receive a second parameter that will output the content into the indicated file.

header('Content-type: image/jpeg'); imagejpeg($rImg);

This is the final result:

And this is the final code:

&lt; ?php

//Carregar imagem $rImg = ImageCreateFromJPEG("ex-img.jpg");

//Definir cor $cor = imagecolorallocate($rImg, 0, 0, 0);

//Escrever nome imagestring($rImg,5,126,22,urldecode($\_GET\['nome'\]),$cor);

//Header e output header('Content-type: image/jpeg'); imagejpeg($rImg,NULL,100);


Using custom fonts

We can use custom fonts to write our text, like Arial, Verdana or even more exotic ones like Futura or any other font not present by default in typical systems.To use TrueType fonts we can use the imagettftext function that allows us to point a .ttf file of the font we wish to use, as we can see jus below:

$font = 'arial.ttf'; imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);
comments powered by Disqus

Related Posts

PHPT: Writing tests for PHP

PHPT: Writing tests for PHP

  • August 23, 2009

This year the PHP Community promoted the PHPTestFest in various places around the globe and it was a success. I participated in the event promoted by the PHPSP UG which ended up as the team with the most committed tests, after participating in the event I kept on going and have since obtained a SVN account and karma to be a official test commiter to PHP. So if you did not get the chance to learn how to write tests in your local TestFest I will now go over the steps taken so you can be ready for next year.

PHPT is a extremely simple test framework designed to test PHP. Its atomic nature and independent test execution make it perfect for the kind of tests needed, so tests can be really focused and test specific function and/or bugs.

What do I need to know?

The beauty about PHPT is that you need to know very little other than writing PHP code. A little knowledge into the inner workings of PHP will of course help you in finding areas of code that need testing, and how best to test them, but just knowing PHP is enough to start.

I have divided this post into 5 parts so we can get started:

  1. Preparing the Environment
  2. Choosing what to test
  3. Writing a test
  4. Executing a test
  5. Submitting a test to PHP

Read More
DashBoard Widget: Gerador de códigos QR

DashBoard Widget: Gerador de códigos QR

  • May 19, 2008

Com o advento dos smartphones , ferramentas usadas nas mais diversas áreas acabam chegando rapidamente a eles.

Read More
Encontro AUGDF

Encontro AUGDF

  • July 11, 2007

Acontece no próximo dia 19/07 um encontro do Adobe Users Group do Distrito Federal.

Read More