This article will explain how to use the GD Image processing library in PHP to create an image on the fly. Creating images on the fly is a very useful function within PHP, a common use for this is creating banners for users of your site to use as email or forum footers. This is what will be created in this tutorial…

This is the picture we will be creating in this tutorial:

Below is the PHP code required to create the image for this tutorial, after the jump I’ll explain each part of this code. Simply putting this code into a PHP page by itself and browsing to it will display the image in the browser.

<?php
$im = imagecreate(420,50);
$white = imagecolorallocate($im,255,255,255);
$blue = imagecolorallocate($im,0,0,255);
$black = imagecolorallocate($im,0,0,0);
$fontcolour = imagecolorallocate($im,255,255,255);

ImageFill($im,0,0,$white);

imageFilledRectangle($im,5,5,414,44,$black);
ImageFilledRectangle($im,5,5,60,44,$blue);
ImageRectangle($im,0,0,419,49,$black);

imagestring($im,1,10,13,”Score”,$white);
imagestring($im,5,10,23,”95%”,$white);
imagestring($im,5,70,10,”Title for banner”,$fontcolour);
imagestring($im,2,70,27,”Subtitle for banner”,$fontcolour);

header ("Content-type: image/jpg");
imagejpeg($im);
?>

The first thing we do when creating an image is create a variable which will contain all of the information about the image, do to this we create a PHP variable as normal and assign it the function of “imagecreate” like below…

$im = imagecreate(420,50);

The image create function creates the image container, the first numeric value refers to the overall width of the image in pixels, the second the overall height in pixels. As we progress down the code we assign more values, however the “imagecreate” function must be set before we do this.

Next in our code we allocate the colours we are going to use in our image, again colours must be assigned before they are used, so it’s best to do this directly after you have created the image container. To assign a colour you must use the “imagecolorallocate” function like below…

$white = imagecolorallocate($im,255,255,255);

This creates the colour allocation and sets it as the variable “white”. The first parameter in the function is the image that will use this colour, after this is the red, green and blue values that create the colour. You can use the RGB scale (0 to 255) or hexadecimal colour scale (0×00 – 0xFF) here, either way you must always declare the colours in order (red first, then green followed by blue.)
After we have allocated colours to be used, we can start colouring our picture. In our example will fill the entire container by using the “imagefill” function. This function will flood fill the entire contents from given coordinates set in pixels. The function has 4 variables…

• The image to be filled (in our example $im)
• The x coordinate to start drawing from
• The Y coordinate to start drawing from
• The colour to fill the image with

ImageFill($im,0,0,$white);

As we add more elements to our image they will automatically sit on top of other elements, so in reality will have just actually created the canvas colour. Once this has been set we can start drawing shapes within the container, for this tutorial we will draw everything with rectangles. You can use either filled or empty rectangles. To start with we will add an empty rectangle to act as a border around our image, to do this we use the following code…

ImageRectangle($im,0,0,419,49,$black);

The image rectangle function has 6 variables these being

• The image to add the rectangle to
• The x coordinate to start drawing from
• The y coordinate to start drawing from
• The width
• The height
• The colour.

All the numeric’s are in pixels and the width of the outline is always one pixel. Filled rectangles work in exactly the same way other than that the specified colour variable will fill the rectangle and it does not have a border, see below…

ImageFilledRectangle($im,5,5,60,44,$blue);

If you wish to add text to your image you must use the image string function (in this example we are not using the true type fonts available for use, so the text will be rendered using the PHP default font.) The variables to set in order are as follows…

• The image to add the text to
• The system font size to use (ranges from 1 to 5)
• The X coordinate to start drawing from
• The Y coordinate to start drawing from
• The actual text you wish to place
• The font colour

imagestring($im,1,10,13,”User Score”,$white);

If you which to add static text, place quotes marks around it so PHP knows it’s a string, alternatively you can place a variable here.
Once you have create all of the rectangles and text you require we can finally render our image, to do this we must first tell our browser to expect an image, do to this we add this line in PHP…

header ("Content-type: image/jpg");

Finally we use the PHP function to create the complete image as follows…

imagejpeg($im);

If in your page you have any echo’s it will break the image as the document will no longer be a JPG, so ensure that everything is set within the image functions and no echo’s are present. You can simply replace the static text in our tutorial with variables you have set, to include dynamic data.

If you wish to link to this image you can simply use the page name like this…

<img src=”createImage.php”>

This will display the image where ever you put the image tag. It’s worth noting that a lot of applications and websites only allow images with JPG extensions so you may wish to use a rewrite in Apache to rewrite the URL as an image URL to your image generation PHP page.