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:
/ 22 
