Beginning PHP4 | 4

[previous] [next]

Beginning PHP4

Drawing on our Image

Now that we've seen how the coordinate system works and have two colors to draw with, we can start making pictures. But what about allocating a background color for our image? ImageCreate()didn't have an argument that allowed us to specify the background color of the image.

As it happens, we don't need to tell the image what its background color is explicitly; the first color we allocate to the image automatically becomes the background color. Looking back at the code that we've covered so far:

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

we see that the first color allocated was $gray. Our background color for $image will therefore automatically be gray. We will use our pure blue $blue to draw the shapes on our image.

Lines

To draw a line, we use the ImageLine() function, using the following format:

ImageLine($image, 10,10, 150,30, $blue);

As usual, the first thing we have to tell the function is the identifier of the image canvas we're working on. The next two arguments are the x and y coordinates of the start of the line, while the two after that are coordinates for the end of the line. The final argument is the identifier for the color in which we'll be drawing the line.

The example above draws a line that starts 10 pixels from the left and 10 pixels from the top of the image, and ends at x = 150, y = 30. The layout of the resulting image is shown in the diagram below:

Once the line has been drawn onto the image canvas, we need to either save the canvas to disk or send it to the browser. We're going to do the latter, using a function. This only requires one piece of information: the identifier of the image canvas that we want to output:

ImageJPEG($image);

If we want to save the image to disk, we can specify a second argument, containing the filename we want to use:

ImageJPEG($image, "image.jpg");

If we're saving the image as a disk file, we can also specify a third argument. This must be an integer value between –1 and 100, which specifies the quality of the resulting JPEG image.

A value of 0 will generate a small file but consequently a very low quality image. On the other hand, a value of 100 will give you high quality but a larger file. The images below should gives you some idea of the trade-offs you'll be looking at:

Line quality = -1

Line quality = 20

Line quality = 100

A value of –1 tells the ImageJPEG() function that it should use default quality, which should be very close to optimal – in practice this is equivalent to a setting of around 70.

Something else that we need to bear in mind at this point is the Header() function. Whenever we send non-HTML data to the browser, we should let it know what it is, so that it can be properly processed. We use this function at the top of our example to produce a page header, and let the browser know what sort of file to expect:

Header("Content-type: image/jpeg");

Finally, we need to call the ImageDestroy() function with the image identifier. It will be no surprise to you that this function destroys the image canvas, freeing up the server memory it occupied.

Let's take a look at our complete code at this point:

<?php
//draw1.php
Header("Content-type: image/jpeg");
$image = ImageCreate(200,150);
$gray = ImageColorAllocate($image,204,204,204);
$blue = ImageColorAllocate($image,0,0,255);
ImageLine($image,10,10,150,30,$blue);
ImageJPEG($image);
ImageDestroy($image);
?>	

Which gives us:

[previous] [next]