< Previous - Index - Next >

Images and Graphics with PHP

PHP employs the Boutell GD library to provides a wealth of functions for generating and manipulating images. This works in conjunction with a host of other libraries for handling image formats and fonts.

JPEG, PNG, BMP, WBMP and TIFF formats
TrueType, FreeType and other fonts

GIF is notably absent. GD fell fall foul of the Unisys LZW patent (Lempel Ziv Welch). Versions prior to 1.6 generate .gif files but are no longer in distribution. Current version was 1.8.4 but 2.0.30 in being promoted as of 21st July 2004. stuweb.cmsboasts GD Version 2 with FreeType.

Image support in PHP is a bit of a pot-pourri assembled at at build time. As well as the GD fuctions there is support for PDF (Acrobat), Shockwave (Flash) and Ming, an open source library that allows creation of SWF formats. Expect some variations across different PHP installations. Windoze tends to install from binary and arrive fully loaded, which can be rather nice. Windoze also tends to be less painful than Unix when it comes to fonts.

Server side image map

Use input type image in a form:

<form method="post" action="ImageMap.php">
<div class="centre">
<input type="image" src="bob.gif" width="289" height="201" name="map" alt="Intolerant Bob"/>
</div></form>

Things to notice about ImageMap.php

<?php
echo 'map_x = ' . $_POST['map_x'] . '<br />';
echo 'map_y = ' . $_POST['map_y'] . '<br /><br />';
if ( $_POST['map_x'] > 125 && $_POST['map_x'] < 145 && $_POST['map_y'] > 80 && $_POST['map_y'] < 100 ) {
?>
<img src="/~mkg01/images/bobpush.gif" width="231" height="231" alt="Push off!"/>
<?php } else { ?>
<img src="/~mkg01/images/bob.gif" width="289" height="201" alt="Intolerant Bob"/>
<?php } ?>
<br /><a href="<?php echo $_SERVER[HTTP_REFERER] . '#imagemap' ?>">Go back</A>
</p>

Form data includes the x and y pixel coordinates of the mouse click. These are available as $map_x and $map_y in the PHP script.

Conditional statement defines an area on the image.

Use of environment variable $_SERVER[HTTP_REFERER] - see info.php for a complete list of environment variables available with PHP.

Creating Graphics

The GD library allows simple graphics to be created on-the-fly allowing run time customisation of web page graphical content.

Things to notice about drawIt.php

<?php
# Create an image
$myImg = ImageCreate(400,200);
ImageInterlace($myImg, 1);

# Allocate colours for drawing
$raspberry = ImageColorAllocate($myImg, 120, 60, 100);
$apricot = ImageColorAllocate($myImg, 255, 180, 100);
$fennel = ImageColorAllocate($myImg, 100, 255, 100);

# Draw the picture
ImageFill($myImg, 200, 100, $apricot);
ImageArc($myImg, 200, 100, 380, 180, 0, 360, $raspberry);
ImageFill($myImg, 50, 50, $raspberry);
ImageString($myImg, 5, 150, 90, $_POST['formtext'], $fennel);

# Output as a PNG image
header("Content-Type: image/png");
ImagePNG($myImg);
ImageDestroy($myImg);
?>

Output is a PNG image, hence the image/png mime header.
ImageCreate() returns a pointer to an image with a defined pixel size.
Interlacing is turned on.
Colour pallette for the image is set up with ImageColourAllocate().
Note use of decimal RGB values - hex format is 0xFF.
Simple graphics primitives ImageFill() and ImageArc() draw the image.
ImageString() uses built-in fonts - this is the largest!
Image is destroyed after output to liberate memory.

Editing Graphics

PHP allows editing of images

Here the file bob.png is read into an image, edited and written back to the server filesystem as an image.

Things to notice about imageMap2.php

<?php
# Read PNG image from file
$image = ImageCreateFromPng ("bob.png");

# Edit the image
$red = ImageColorAllocate ($image, 255, 0, 0);
ImageArc($image, $_POST['map_x'], $_POST['map_y'], 30, 30, 0, 360, $red);
ImageFillToBorder($image, $_POST['map_x'], $_POST['map_y'], $red, $red);

# Write image to file as a PNG
ImagePNG($image, "bobEdit.png");
ImageDestroy($image);
?>
<div style="text-align:center">
<img src="bobEdit.png"  alt="PHP edited PNG image">
</div>
<p><a href="<?php echo $_SERVER['HTTP_REFERER'] . "#edit" ?>">Go back</a>

Oh dear! - can anyone spot the problems here!
How could they be addressed?

Quick questions

Q. Is it a good idea to create graphics like this on the server?
A. Discuss.

Q. How is the image incorporated into a web page?
A. Use an IMAGE tag.

CAPTCHA

Completely Automated Process for Telling Computers and Humans Apart

Used to prevent robotic attacks on Web applications. Reload the page to see the image change. Note that the character set excludes characters which may be easily mistaken.

captcha.php
captcha.php source
CAPTCHA image

<?php
# Read background image
$image = ImageCreateFromPng ("captcha100x40.png");

# Randomise the text colour
$red = rand(80,130);
$green = rand(80,130);
$blue = 320 -$red - $green;
$textColour = ImageColorAllocate($image, $red, $green, $blue);

# Randomly select a character string
$charArray = array('a','b','c','d','e','f','g','h','j','k','m','n','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','T','U','V','W','X','Y','Z','2','3','4','6','7','8','9');
shuffle($charArray);
$captchaString = $charArray[0];
for ($i=1; $i<5; $i++) $captchaString .= ' ' . $charArray[$i];

# Edit the image
ImageString($image, 5, 10, 10, $captchaString, $textColour);

# Enlarge the image
$bigImage = imagecreatetruecolor(200, 80);
imagecopyresized($bigImage, $image, 0, 0, 0, 0, 200, 80, 100, 40);

# Output the image as a low quality JPEG
header("Content-Type: image/jpeg");
Imagejpeg($bigImage, NULL, 8);

# clean up
ImageDestroy($image);
ImageDestroy($bigImage);
?>

You will of course need to keep a copy of the captcha string somewhere so that your application can check that the user has correctly read the image.

Try this simple example time.php

<?php echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml11.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
<title>What time is it?</title>
</head>
<body>
<h1 align="center">What time is it?</h1><hr />
<form action="time.php" method="get"><p>
<input type="radio" name="clocksize" value="50"> 50<br />
<input type="radio" name="clocksize" value="100"> 100<br />
<input type="radio" name="clocksize" value="200"> 200<br />
<input type="radio" name="clocksize" value="300"> 300<br />
<input type="radio" name="clocksize" value="400"> 400<br />
<input type="submit" name="time" value="What time is it?">
<p><p style="text-align:center">
<?php
$clocksize = 200;
if ( isset($_POST['clocksize']) ) $clocksize = $_POST['clocksize'];
?>
<img src="clock.php?diam=<?php echo $clocksize ?>" height="<?php echo $clocksize ?>" width="<?php echo $clocksize ?>" alt="PHP generated image">
</p>
</form></body></html>

Look at the code for clock.php

< Previous - Index - Next >