Graphics in PHP
The Web is more than just text. Images appear in the form of logos, buttons, photographs, charts, advertisements, and icons. Many of these images are static, built with tools such as PhotoShop and never changed. But many are dynamically created—from advertisements for Amazon's referral program that include your name to Yahoo! Finance's graphs of stock performance.
PHP supports graphics creation with the GD and Imlib2 extensions. In this chapter we'll show you how to generate images dynamically with PHP, using the GD extension.
Embedding an Image in a Page
A common misconception is that there is a mixture of text and graphics flowing across a single HTTP request. After all, when you view a page you see a single page containing such a mixture. It is important to understand that a standard web page containing text and graphics is created through a series of HTTP requests from the web browser, each answered by a response from the web server. Each response can contain one and only one type of data, and each image requires a separate HTTP request and web server response. Thus, if you see a page that contains some text and two images, you know that it has taken three HTTP requests and corresponding responses to construct this page.
Take this HTML page, for example:
<html>
<head>
<title>Example Page </title>
</head>
<body>
This page contains two images.
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<head>
<title>Example Page </title>
</head>
<body>
This page contains two images.
<img src="image1.jpg" alt="Image 1">
</body>
</html>
To embed a PHP-generated image in an HTML page, pretend that the PHP script that generates the image is actually the image. Thus, if we have image1.php and image2.php scripts that create images, we can modify the previous HTML to look like this:
<html>
<head>
<title>Example Page </title>
</head>
<body>
This page contains two images.
<img src="image1.php" alt="Image 1">
<img src="image2.php" alt="Image 2">
</body>
</html>
Instead of referring to real images on your web server, the img tags now refer to the PHP scripts that generate the images. Furthermore, you can pass variables to these scripts, so instead of having separate scripts to generate the two images, you could write your img tags like this:
<img src="image1.php?num=1" alt="Image 1">
<img src="image1.php?num=2" alt="Image 2">
Then, inside image.php, you can access $_GET['num'] (or $num, if register_globals is on) to generate the appropriate image.
</body>
</html>
Instead of referring to real images on your web server, the img tags now refer to the PHP scripts that generate the images. Furthermore, you can pass variables to these scripts, so instead of having separate scripts to generate the two images, you could write your img tags like this:
<img src="image1.php?num=1" alt="Image 1">
<img src="image1.php?num=2" alt="Image 2">
Then, inside image.php, you can access $_GET['num'] (or $num, if register_globals is on) to generate the appropriate image.
The GD Extension
PHP is not limited to creating just HTML output. It can also be used to create and manipulate image files in a variety of different image formats, including GIF, PNG, JPEG, WBMP, and XPM. Even more conveniently, PHP can output image streams directly to a browser. You will need to compile PHP with the GD library of image functions for this to work. GD and PHP may also require other libraries, depending on which image formats you want to work with.
You can use the image functions in PHP to get the size of JPEG, GIF, PNG, SWF, TIFF and JPEG2000 images.
Basic Graphics Concepts
An image is a rectangle of pixels that have various colors. Colors are identified by their position in the palette, an array of colors. Each entry in the palette has three separate color values—one for red, one for green, and one for blue. Each value ranges from 0 (this color not present) to 255 (this color at full intensity).
Image files are rarely a straightforward dump of the pixels and the palette. Instead, various file formats (GIF, JPEG, PNG, etc.) have been created that attempt to compress the data somewhat to make smaller files.
Different file formats handle image transparency , which controls whether and how the background shows through the image, in different ways. Some support an alpha channel, an extra value for every pixel reflecting the transparency at that point. Others simply designate one entry in the palette as indicating transparency.
Antialiasing is where pixels at the edge of a shape are moved or recolored to make a gradual transition between the shape and its background. This prevents the rough and jagged edges that can make for unappealing images. Some functions that draw on an image implement antialiasing.
With 256 possible values for each of red, green, and blue, there are 16,777,216 possible colors for every pixel. Some file formats limit the number of colors you can have in a palette (e.g., GIF supports no more than 256 colors); others let you have as many colors as you need. The latter are known as true color formats, because 24-bit color (8 bits for each of red, green, and blue) gives more hues than the human eye can distinguish.
Creating and Drawing Images
Example is a script that generates a black filled square. The code works with any version of GD that supports the PNG image format.
A black square on a white background (black.php)
<?php
$im = ImageCreate(200,200);
$white = ImageColorAllocate($im,0xFF,0xFF,0xFF);
$black = ImageColorAllocate($im,0x00,0x00,0x00);
ImageFilledRectangle($im,50,50,150,150,$black);
header('Content-Type: image/png');
ImagePNG($im);
?>
example illustrates the basic steps in generating any image:
creating the image, allocating colors, drawing the image, and then saving.
To see the result, simply point your browser at the black.php PHP page. To embed this image in a web page, use: