Beginning PHP4 | 3 | WebReference

Beginning PHP4 | 3

current pageTo page 2To page 3To page 4

Beginning PHP4

Generating Graphics

By now you will have a very good understanding not only of how PHP works but the flexibility and wide range of platforms and programming applications that you can interact with in PHP. You can confidently connect to databases and create textual output for the person browsing your Web site to view, but sooner or later you are going to need to output that information in a graphical format. Sure you could fire up a graphics program and create a few good looking graphics for your site, but what about when your graphic is directly related to the data in your database?

PHP contains a range of functions that allow you to open, manipulate and output graphics to the Web browser. During this chapter we will explore how these functions work and how we can apply them to display our data.

By the end of the chapter we will not only have seen how to create images on the fly, but will have built a practical application using these methods and concepts.

Laying a Foundation

As with all things in life, we have to learn to walk before we can run before we can jump in and start producing the goods, we have a few basics to get through.

PHP uses the gd graphics library for all but its most basic image functions. Provided you have a recent version of the library, you can create and manipulate images in a number of different formats; the two most noteworthy are JPEG and PNG. These are both compressed file formats, which means that they use mathematical algorithms to reduce the amount of data required to completely describe the image. They therefore play a very important role in keeping your file sizes small and download times short!

It's important to be able to recognize where you should use each format – they use quite different compression techniques, and most images will be better suited to one or the other.

The JPEG format uses lossy compression. What this means is that some of the data in the original image is lost during compression. The format is designed to work best with images like photographs (that's where the "P" in "JPEG" comes from), where there's a lot of subtle shading and not too much fine detail. It's the format to use when a slight loss in quality won't be too apparent to the viewer.

The PNG format on the other hand is compressed in a lossless fashion. It works best with images that contain lines and large blocks of color, cartoons for example. When the image is uncompressed, it will contain all of its original information. This means that sharp edges and straight lines (which suffer under JPEG compression) will be reproduced faithfully.

Early versions of gd (and thus PHP) contained support for GIF files, which are similar in many respects to PNG. However, Unisys holds a patent on the LZW compression algorithm used to create fully compressed GIFs, and consequently GIF support has been completely replaced by that for PNG files since gd version 1.6. All is far from lost though, as JPEG and the excellent PNG image encoding formats should be sufficient for all your graphics needs.

Before we even look at the technicalities of creating the image, let's go through the steps involved in getting PHP to create an image and display it in the browser:

This is effectively just a section of memory in which we define an image before outputting it to the browser or to disk.

Create an image canvas for PHP to work on – this is simply a reserved portion of server memory, onto which the script will "draw" (that is, write data) before outputting it to the browser or disk as an image. Draw the picture on the image canvas. Send the image to the browser. Clean up memory by throwing away the image canvas.

Creating an Image

As mentioned above, the first thing we need to do is create a blank image canvas for PHP to work on – a call to the ImageCreate() function does just this. The only two things we need to tell it are the width and height of the image we wish to create. ImageCreate() will then return an identifier that identifies that blank image in memory. All the subsequent image functions we use will have to refer to the image in memory by means of this identifier.

This identifier is similar to a file handle or database link ID, as we've used in recent chapters, but refers to the location of our image canvas in memory rather than an open file on the disk or an active database connection.

$image = ImageCreate(200,150);

We've now defined $image as the identifier referring to the new, blank canvas (200 pixels wide by 150 pixels high) that ImageCreate() has just created for us. Now that this 200 x 150 pixel image is in memory we can start drawing on it. First though, we need to know what color we'll be drawing in.

Setting up Colors

Before we can tell PHP that we want to use a certain color on our canvas, we have to create that color. We do this in a similar fashion to that of creating the image canvas:

$gray = ImageColorAllocate($image,204,204,204);
$blue = ImageColorAllocate($image,0,0,255);

We've used the function ImageColorAllocate() to define two colors for our image: a gray and a blue. Each color is assigned a unique identifier and tied to an existing image canvas. As you can see, this function requires 4 pieces of information:

The first is the identifier of the image canvas with which this color will be used. This is the same identifier that we saw returned to us earlier from the ImageCreate() function.

The second, third and fourth things we need to tell ImageColorAllocate() are the respective values of red, green and blue components for that color, which must lie between 0 and 255. Computers make up color by mixing different quantities of Red, Green and Blue. This is what is known as RGB mode color. Each of red, green and blue can range from 0 to 255. Setting each of red, green and blue to 0 will give us black (total absence of color), a value of 255 for all three will give us white. If we want to stick to Web-safe colors, then we have to limit our values of red, green and blue to multiples of 51. That gives us 6 possible values for each of red, green and blue, for a total of 216 colors.

$gray and $blue are now two new identifiers to the colors gray and blue. We created the former by specifying equal values of each color. Note that 204 was not a number we pulled from the hat, but a multiple of 51, and we've therefore defined a Web-safe color. We defined $blue by telling ImageColorAllocate() that the red component was 0, the green component was 0 and that the blue component was 255.

The Image Coordinate System

While we're dealing with theory here, we may as well take a look at how the image coordinate system works. It may sound like a mouthful but it's simply a way for us to precisely describe points in the image.

If you're familiar with creating graphs, you'll probably be used to the x and y values radiating outwards from the bottom left hand corner. In PHP, all coordinates radiate outwards from the top left-hand corner of the image, as the image below shows:


With this in mind, let's take a look at how our blank $image is laid out:


The x-y coordinates for the top left corner of $image are 0,0. This will be true for every image that you create. The x-coordinates extend to the right for 200 pixels and y-coordinates extend down for 150 pixels, so the bottom right-hand corner of the image has x-y coordinates of 199,149.

current pageTo page 2To page 3To page 4

Revised: March 15, 2000
Created: March 15, 2000