Beginning PHP4 - Drawing on our Image
(Page 5 of 6 )
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:
Circles
To create an arc, circle or ellipse in PHP, we use a function called ImageArc() with the following syntax:
ImageArc(image_id, x, y, width, height, start, end, color_id);
As you can see this function takes quite a few
arguments. The first is, as usual, the image identifier. Next are our x and y coordinates, and in this case they specify the center point of our arc. The width and height are the width and height of the circle or ellipse from which we take the arc.
Note we don't use a radius, as this would limit us to using a perfect arc or circle. The option to have different height and width means that we can use this function to create ellipses. A circle is simply an ellipse whose height and width are equal.
Start and end points for the arc are measured clockwise in degrees from the right-hand horizontal radius (that is, three o'clock):
The slanted line we created earlier had one end at the position x = 150, y = 30. We're now going to create a circle that's 70 pixels across, the top of which touches this end of that line. The x value for the center of our circle will therefore be 150 again, but the y value must be greater than that of the line end by 35 (that is, half the width of the circle – remember we're dealing with a width of 70, not a radius).
The y value for the end of the line is 30, the circle center must have y = 65. Since we are going to create a full circle, we must draw our arc through a complete 360 degrees: start = 0 and end = 360. We'll draw the circle in blue as well.
Our code now looks like this:
<?php
//draw2.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);
ImageArc($image,150,65,70,70,0,360,$blue);
ImageJPEG($image);
ImageDestroy($image);
?>
and produces this:
Rectangles
If you've picked up on any of the trends in this chapter, you'll have guessed by now that the function to create a rectangle in PHP is ImageRectangle():
ImageRectangle(image_id, x1, y1, x2, y2, color_id);
The arguments correspond to the image identifier, the x and y
coordinates of the top left-hand corner of the rectangle, the x and y coordinates of the bottom right-hand corner of the rectangle, and the identifier for the color we want it drawn in.
Pretty straightforward, right? Here's the code, which now adds a box whose top right-hand corner is at x = 150, y = 65, the same as the center of the circle.
<?php
//draw3.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);
ImageArc($image,150,65,70,70,0,360,$blue);
ImageRectangle($image,10,65,150,140,$blue);
ImageJPEG($image);
ImageDestroy($image);
?>
This now returns the following image:
Next: Putting it all Together >>
More PHP Articles
More By Dev Shed
/ 22 
