Generating Images on-the-fly with PHP and GD.

Introduction

Have you ever wondered how some e-greeting websites put your text in the card image? Or perhaps you’ve noticed an image in somebody’s forum signature that showed your IP? This article will show you this is done using a few practical examples.

A dynamic image can be a very powerful and informative tool, and in this article I will discuss the basics of creating generating on-the-fly images with PHP and the GD library (http://www.boutell.com/gd/).

This article assumes that your host has both PHP and the GD library installs and will not cover the installation procedure(s).

Your First Image
Let's start by creating and outputting a very simple image.
<?php Header( "Content-type: image/png"); $image = imagecreate(320,130); $red = ImageColorAllocate($image,204,0,0); ImageFilledRectangle($image,0,0,320,130,$red); ImagePNG($image); ImageDestroy($image); ?>
Let's go by this line by line.

Header( “Content-type: image/png”);

First, we override the default HTTP header with a “Content-type: image/png” header. Basically, this is telling the browser to interpret the following as an image, because that’s what it is.

$image = imagecreate(320,130);

Next, we must assign a variable to our image (in this case, $image). In english, the line would state “Create an image 320 by 130 pixels and put it into memory as $image.

$red = ImageColorAllocate($image,204,0,0);

All colours that you use must be allocated, this is done via the ImageColorAllocate() function. In this example, we set $red to 204,0,0 RGB.

ImageFilledRectangle($image,0,0,320,130,$red);

Here’s when we actually draw the red rectangle using the ImageFilledRectangle() function. We’re telling GD to create a rectangle in $image, starting from top-left (0,0), make it 320×130 pixels and colour it red.

ImagePNG($image);

Up to this point, the image has been stored in memory. This is when PHP will actually output the image to the browser – this is done using ImagePNG(), because in our case we are creating a PNG image.

ImageDestroy($image);

Finally, the image should be destroyed from memory since it has been outputted to the client.

You can now call this script from the browser directly (www.yourdomain.com/createpng.php) or using the <img> tag, IE: <img src=”createpng.php>.

Head over to the next page where we deal with dynamic data, and outputting text on to our image!

Dealing with Dynamic Data

Now that you know how to create a simple image, you may be wondering “what next?”. Well, here’s where the real fun begins – dealing with data!

Let’s create an image which will output the date, time and user’s IP address.


<?php
Header( "Content-type: image/png");
$image = imagecreate(320,130);
$date = date ("F dS Y h:i a");
$ip = $_SERVER['REMOTE_ADDR'];
$fullip = "Your IP address is $ip.";
$black = ImageColorAllocate($image,0,0,0);
$red = ImageColorAllocate($image,204,0,0);
$white = ImageColorAllocate($image,255,255,255);
ImageFilledRectangle($image,0,0,320,130,$white);
ImageString($image, 14, 0, 0, "$fullip", $red);
ImageString($image, 12, 0, 24, "Time is $date", $black);
ImagePNG($image);
ImageDestroy($image);
?>


The only new function in this image is ImageString(), which simply outputs text on to the image using a default system font (to use custom fonts,

see Imagettftext()). For example, to output the user’s IP we use ImageString($image, 14, 0, 0, “$fullip”, $red); which outputs $fullip (as assigned in the beginning) to $image (our image), with font size 14, starting at top left (0,0).

The great thing about this image is that the output will change every time the script is called (namely, the time will) because we assign the time using:

$date = date (“F dS Y h:i a”);, which grabs the system’s current time.

Creating Images Based on User Input

It is even possible to create images based on the users’ input.

Take a look at this script, for example:

<?php Header( “Content-type: image/png”); $image = imagecreate(320,130);$text = $_GET[‘text’];$black = ImageColorAllocate($image,0,0,0); $white = ImageColorAllocate($image,255,255,255); ImageFilledRectangle($image,0,0,320,130,$white);ImageString($image, 12, 0, 0, “$text”, $black);ImagePNG($image);ImageDestroy($image);?>

Save this script and call it directly in the following manner: www.yourdomain.com/script.php?text=your_string_here.

The image outputted will have that text written on it!

If you have worked with HTTP variables before, you’ll recognize that $text = $_GET[‘text’]; is responsible for that.

Conclusion

As you can, the possibilities are endless and this article only started to cover the things you can do with PHP and GD.

For a full reference and list of functions that you may use, refer yourself to PHP.net’s Image Function reference page.

About the Author: Kirill Talanov