DiscoMoose

This article will tell you how to write text on an existing PNG image using PHP using PHP's image manipulation functions. The image functions require the GD library to be installed. This article is fairly basic, however some more detail on the basic functions used is included in the article, "write text on a dynamically generated image in PHP"

First, we need the source image. In this example, we're using an image called image.png (with dimension 150x150, though this code will work with any size of image) which is shown below:

This image is going to be kept in the same directory on the webserver as the php file we're using to manipulate it.

Now it's time for PHP code to load the image. We make use of the function imagecreatefrompng() to get the image into PHP to manipulate. This takes the path to the image as a parameter. If the image can't be loaded then we'll tell it to die() and stop interpreting the page, however there are better ways of dealing with this error.

Next, we'll define some colours for use in the image using the imagecolorallocate() function:

Now we get the dimensions of the image, using the imagesx() and imagesy(), which take the image resource as a parameter and return the width and height respectively:

The next step is to draw a black rectangle on to the image to ensure that the text we write is visible. This step is optional, as you could write the text directly on to the image.
The coordinate system used in PHP is that the top left of an image is (0,0) and the bottom right is ($width, $height). We're going to draw the rectangle across the bottom 20px of the image, so we pass imagefilledrectangle two sets of coordinates: (0, $height-20) and ($width, $height). The coordinates we're passing - as the 2nd to 4th parameters) tell the method to draw a rectangle from a point on the left hand side, 20 pixels from the bottom, to the very bottom right of the image. The rectangle is then automatically filled black.

Now it's time to write the text on the image. In this example, we will write the text in the middle of the rectangle we just created. First we declare two variables, $font and $text, to store the int representing the system font we're using and the text we're going to write to the image, respectively.

Then we will calculate where the left edge of the text is. This is done by using imagefontwidth() to get the width of the system font we're using (which is fixed width, so all characters have the same width), then multiplying that by the number of characters in the string we're writing. This finds the length of the text in pixels. We then subtract that from the total width of the image and divide by two to find the left position, which we store in the variable $leftTextPos:

Now we write the text to the image, using the imagestring() function passing the variables we created earlier as parameters (NB. As height we're using the image height minus 18 pixels, to estimate a decent fit in the box, rather than calculating the height in the same way as width.)

Lastly, we send the image to the browser then clear it from memory:

That's it! the output image is:

This will be shown in the browser whenever anyone accesses the php page we've just created!

To finish off, here's the code in full:

If you have a low-traffic website, consider joining the Money4Banners advertising network. They will pay you £10 + £5 each month for displaying a small advert on three of your pages, regardless of traffic. American webmasters are welcome, and since £10 == $20, you make more!