Beginning PHP4 | 3

[next]

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.

$gray = ImageColorAllocate($image,204,204,204);
$blue = ImageColorAllocate($image,0,0,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.

[next]