Generating Graphics with GD
 |
Once you have configured PHP to use the GD library, you can start creating some graphics.
The Lines and Text
The base function to use when creating images using the GD library is the ImageCreate() function.
$length = 300; $width = 100; $image = ImageCreate($length, $width);
Once you have created an image, you need to add some color to it using the ImageColorAllocate() function. ImageColorAllaocate() takes as its arguments the image you are creating and an RGB color value:
$blue = ImageColorAllocate($image, 0, 0, 255);
So now you have created a box and given it a color. Now all that is left is to display the image in a browser. To do that, you need two more lines of code:
Header("Content-type: image/png"); ImagePNG($image); The first line tells the browser to expect a PNG image, and the second line is the function that outputs the image that you have created to the browser. Before you go typing that all in, though, let's add some text.
Now that you have your created your base image, you can add some shapes onto it. The most basic "shape" you can add to your image is a line. A line is created by connecting two endpoints on your image. Lines are created with the ImageLine() function:
ImageLine($image, $x1, $y1, $x2, $y2, $color);
The points which you specify in the ImageLine() function are x,y vertices, almost like those used in plotting points in mathematics, except that the grid used here is a little different. The grid used to place shapes in GD starts at the x,y point 0,0 in the top left corner. The x coordinate moves to the right, as in a normal math graph. The y coordinate however, moves down, instead of upward as it does in a math graph, so the point (10,20) is 10 pixels to the right of the upper left corner of the image and 20 pixels down.
GD also supports some basic string functions that allow you to print text onto the image. You can only use one basic font and there are only five sizes, listed in Table 11-1, but it works well for graphs and charts where flashy fonts are not required. To add text to your image:
IMageString($image, $fontSize, $x1, $y1, $string, $color);
| FONT SIZE | FONT | SIZE |
|---|---|---|
| 1 | gdFontTiny | 8 x 5 pixels |
| 2 | gdFontSmall | 13 x 6 pixels |
| 3 | gdFontMediumBold | 13 x 7 pixels |
| 4 | gdFontLarge | 15 x 8 pixels |
| 5 | gdFontGiant | 15 x 9 pixels |
The next script creates a simple graph, shown in Figure 11-2, using the ImageLine() and ImageString() functions to illustrate how the graph works and the appearance of the text sizes:
Script 11 1 gd_grid.php
1. <? 2. $height = 301; 3. $width = 301; 4. $image = ImageCreate($width, $height); 5. $white = ImageColorAllocate($image, 255, 255, 255); 6. $blue = ImageColorAllocate($image, 0, 0, 255); 7. $red = ImageColorAllocate($image, 255, 0, 0); 8. for($i = 0; $i < $height; $i = $i + 20) { 9. ImageLine($image, $i, 0, $i, $height, $blue); 10. ImageLine($image, 0, $i, $width, $i, $blue); 11. ImageString ($image, 1, $i+2, 0, $i, $red); 12. ImageString ($image, 1, 2, $i, $i, $red); 13. } 14. ImageString ($image, 1, 82, 22, "Size 1 Font", $red); 15. ImageString ($image, 2, 82, 62, "Size 2 Font", $red); 16. ImageString ($image, 3, 82, 102, "Size 3 Font", $red); 17. ImageString ($image, 4, 82, 142,"Size 4 Font", $red); 18. ImageString ($image, 5, 82, 182, "Size 5 Font", $red); 19. header ("Content-type: image/png"); 20. ImagePng($image); 21. ImageDestroy($image); 22. ?>
Figure 11-2. gd_grid.php
| LINE | DESCRIPTION |
|---|---|
| 2 | Define a height of 301 pixels for the image (the extra pixel is so that the final line on the outside of the grid is visible). |
| 3 | Define a width of 301 pixels for the image. |
| 4 | Create the base image using the ImageCreate() function, specifying the height and width defined earlier. |
| 5 | Define the $white variable using the ImageColorAllocate() function. The arguments allow the color white (RGB value 255,255,255) to be used by $image. It is also used as the background color for $image, since it is the first color allocated to $image. |
| 6 | Define the color blue and allow it to be used by $image. |
| 7 | Define the color red and allow it to be used by $image. |
| 8 13 | Create a for loop to loop through and draw a line every 20 pixels starting at the coordinate 0,0 (upper left corner of image). |
| 9 | While in the for loop, create a line inside $image from point $i, 0 (0,0 20,0 40,0, etc.) to point $i, $height (0, 301 20,301 40,301, etc.). Each iteration of the loop draws a vertical line from the top of the image to the bottom of the image spaced at 20 pixels from left to right. |
| 10 | While in the for loop, create a line inside $image from point 0, $i (0,0 0,20 0,40, etc.) to point $width, $i (301,0 301,20 301,40, etc.). Each iteration of the loop draws a horizontal line from the left of the image to the right of the image spaced at 20 pixels from top to bottom. |
| 11 | While in the for loop, create a small label to display the current pixel of the current vertical line using the ImageString() function. Remember, ImageString($image, $fontsize, $x, $y, $text, $color); |
| 12 | While in the for loop, create a small label to display the current pixel of the current horizontal line ImageString() function. |
| 13 | End the for loop. |
| 14 18 | Create some text at various points on the screen to display the various font types. |
| 19 | Send the image headers to the user's browser. |
| 20 | Display the image, $image, that you have created. |
| 21 | Destroy the image from the server memory, since it has already been sent to the browser. |
Adding TrueType Font to Your Images
You can add better-looking text to your images using TrueType fonts. The function that accomplishes this is ImageTTFText().
ImageTTFText($image, $size, $angle, $xcoord, $ycoord, $color, $font, $text);
The arguments for ImageTTFText() are:
$image The image handler for the image in which you are placing this font.
$size The size of the text, in points.
$angle The angle in number of degrees that the text slants. Note that this isn't the slant of the characters themselves, such as when using italic font, but the slant of the "line" on which the text is written.
$xcoord The x coordinate in the image of the bottom left of the first character in $text.
$ycoord The y coordinate in the image of the bottom left of the first character in $text.
$color The color of the text. This must be a color that has been previously allocated to the $image.
$font The location of the TrueType Font file (.ttf).
$text The text that you want to print out in the image.
Script 11 2, gd_text.php, provides an example of a simple GD image with some text, shown in Figure 11-3.
Script 11 2 gd_text.php
1. <? 2. $height = 150; 3. $width= 300; 4. $image = ImageCreate($width, $height); 5. $blue = ImageColorAllocate($image,0,0,255); 6. $white = ImageColorAllocate($image,255,255,255); 7. $font = "arial.ttf"; 8. $text = "Advanced\n\rPHP"; 9. ImageTTFText($image, 50, 0, 10, 55, $white, $font, $text); 10. Header("Content-type: image/png"); 11. ImagePNG($image); 12. ImageDestroy($image); 13. ?>
Figure 11-3. gd_text.php
| LINE | DESCRIPTION |
|---|---|
| 2 | Define a height of 300 pixels for the image. |
| 3 | Define a width of 150 pixels for the image. |
| 4 | Create the base image using the ImageCreate() function, specifying the height and width defined earlier. |
| 5 | Define the $blue variable using the ImageColorAllocate() function. The arguments allow the color blue (RGB value 0,0,255) to be used by $image. It is also used as the background color for $image, since it is the first color allocated to $image. |
| 6 | Define the color white and allow it to be used by $image. |
| 7 | Assign a font file to the variable $font. You need to place this font file in the same directory from which this script is executed. In Windows, you can typically find TrueType font files in C:\Windows\Fonts or C:\WINNT\fonts. You can use any TrueType font file; just make sure the file name of the TrueType font that you copy into the same directory as this script is defined here. |
| 8 | Assign a simple text string to the $text variable. You can use the syntax "\n\r" for newlines and returns. Some *nix sytems do not require the "\r". |
| 9 | Add text to $image using the ImageTTFText() function. |
| 10 | Send the image headers to the user's browser. |
| 11 | Display the image, $image, that you have created. |
| 12 | Destroy the image from the server memory, since it has already been sent to the browser. |
Adding Text to Base Images
GD is also useful in that you can import an existing image to work with as the base of a new image. For example, you can take a blank image of a button, and then superimpose text onto it. This way, you can create multiple buttons from only one base image file.
To create a button, you need to use two new GD functions. These functions are ImageCreateFromPNG() and ImageTTFBbox().
ImageCreateFromPNG() is a very simple function that just creates a new image from the existing PNG file:
$image = ImageCreateFromPNG("blank_blue_bttn.png"); You would then manipulate $image just as you would if you had created it from ImageCreate.
You can get the length and width of the $image you create using the ImageCreateFromPNG() function by using the ImageSX($image) and ImageSY($image) functions, respectively; SX and SY mean Size of the X axis (the width) and Size of the Y axis (the height) of the image.
The ImageTTFBbox() function is a fairly complicated function that returns the corner coordinates of a bounding box around your text. You provide the size, angle, font, and text string of the text and the function returns the corner coordinates in an array. This array allows you to calculate how much space your text uses. Usage of the script is:
$textbox = ImageTTFBbox($size, $angle, $font, $text);
Table 11-2 lists the coordinates for each of the elements in the array returned from the ImageTTFBbox() function. Additionally, Figure 11-4 provides a graphical representation of the array elements in the bounding box.
Figure 11-4. Array Elements for the coordinates in a bounding box
| ARRAY POSITION | BOUNDING BOX COORDINATE |
|---|---|
| 0 | X coordinate of the lower left hand corner |
| 1 | Y coordinate of the lower left hand corner |
| 2 | X coordinate of the lower right hand corner |
| 3 | Y coordinate of the lower right hand corner |
| 4 | X coordinate of the upper right hand corner |
| 5 | Y coordinate of the upper right hand corner |
| 6 | X coordinate of the upper left hand corner |
| 7 | Y coordinate of the upper left hand corner |
This next script demonstrates how to take a blank button and add text to make many different buttons. See Figure 11-5 for an example of the output.
Script 11 3 gd_button.php
1. <? 2. $image = ImageCreateFromPNG("blank_blue_bttn.png"); 3. $white = ImageColorAllocate($image,255,255,255); 4. $font = "arial.ttf"; 5. if(!isset($text)) { $text = "BUTTON"; } 6. $size = "20"; 7. $angle="0"; 8. $textbox = ImageTTFBbox($size, $angle, $font, $text); 9. $textbox_width = abs($textbox[2] - $textbox[0]); 10. $textbox_height = abs($textbox[7] - $textbox[1]); 11. $image_width = ImageSX($image); 12. $image_height = ImageSY($image); 13. $x = ($image_width - $textbox_width) / 2; 14. $y = ($image_height - $textbox_height) / 2 + $textbox_height; 15. ImageTTFText($image, $size, $angle, $x, $y, $white, $font, $text); 16. Header("Content-type: image/png"); 17. ImagePNG($image); 18. ImageDestroy($image); 19. ?>
Figure 11-5. gd_button.php
| LINE | DESCRIPTION |
|---|---|
| 2 | Create a new image using the ImageCreateFromPNG() function, specifying "blank_blue_bbtn.png" as the base image. |
| 3 | Define the $white variable using the ImageColorAllocate() function. The arguments allow the color white (RGB value 255,255,255) to be used by $image. |
| 4 | Assign a font file to the variable $font. You need to place this font file in the same directory from which this script is executed. In Windows, you can typically find TrueType font files in C:\Windows\Fonts or C:\WINNT\fonts. You can use any TrueType font file; just make sure the file name of the TrueType font that you copy into the same directory as this script is defined here. |
| 5 | Check to see if the $text variable is set. If it is not, then assign the string "BUTTON" to $text. The reason for this will be apparent in the next script. |
| 6 | Assign a font size to the $size variable. |
| 7 | Assign an angle to the font using the $angle variable. This argument is required for the ImageTTFbox variable. You assign it to be "0", since you want the text to be horizontal across the page, with no angle. |
| 8 | Create the text box by assigning the value of the function ImageTTFbox() to the variable $textbox. |
| 9 | Determine the width of the text box by getting the absolute value of the text box's lower right-hand x coordinate subtracted from the text box's lower left-hand x coordinate. You use the abs() function, since you want to have a positive number, even though the resulting number may be negative. The abs() value of a number removes the negative sign. |
| 10 | Determine the height of the text box by getting the absolute value of the text box's upper left-hand y coordinate subtracted from the text box's lower left-hand y coordinate. |
| 11 | Determine the width of the entire image by using the ImageSX() function. |
| 12 | Determine the height of the entire image by using the ImageSY() function. |
| 13 | Determine where to place the x value of the text in relation to the base image by subtracting the width of the text box from the width of the base image and dividing by 2. If your base image was 10 pixels wide, and your text box was 8 pixels wide, then your resulting x position for the text would be at 1. This leaves one pixel on either side of the text box for the base image to overlap. This, of course, does not work very well if your text box is larger than your base image. |
| 14 | Determine where to place the y value of the text in relation to the base image by subtracting the text box height from the base image height and dividing by 2. Then add the height of the text box. As above, if your base image was 10 pixels high and your text box was 8 pixels high, this would give you a value of 1 for the y coordinate. However, since you specify the lower left-hand corner (and not the upper left-hand corner as you might assume), you need to also add the height of the text box, giving you a value of 9. |
| 15 | Add the text to the base image using the ImageTTFText() function. You use the x,y values that you have just determined to properly space the text in relation to the base image. |
| 16 | Send the image headers to the user's browser. |
| 17 | Display the image, $image, that you have created. |
| 18 | Destroy the image from the server memory, since it has already been sent to the browser. |
You can easily reuse this script, as shown in Figure 11-6, by adding a parameter to the URL for example, http://localhost/gd_text.php?text=HOME.
Figure 11-6. gd_text.php?text=HOME
You can also call several buttons on one page using the HTML <img> tags and referencing the same script using different values for "text", as in the following short script. See Figure 11-7 for example output.
Script 11 4 buttons.html
1. <html> 2. <head> 3. <title>Buttons!</title> 4. </head> 5. <body> 6. <img src="/books/2/160/1/html/2/gd_button.php?text=HOME"><br> 7. <img src="/books/2/160/1/html/2/gd_button.php?text=GAMES"><br> 8. <img src="/books/2/160/1/html/2/gd_button.php?text=NEWS"><br> 9. <img src="/books/2/160/1/html/2/gd_button.php?text=LINKS"> 10. </body> 11. </html>
Figure 11-7. buttons.html
Creating Rectangles with GD
In addition to text and lines, you can also easily use GD to create rectangles, either filled with a color or unfilled (use ImageRectangle() with the same arguments to create an unfilled rectangle):
ImageFilledRectangle($image, $x1coord, $y1coord, $x2coord, $y2coord, $color);
The arguments to ImageRectangle() and ImageFilledRectangle() are:
$image The image handler for the image in which you are placing this rectangle.
$x1coord The x coordinate of the upper left corner of the rectangle.
$y1coord The y coordinate of the upper left corner of the rectangle.
$x2coord The x coordinate of the lower right corner of the rectangle.
$y2coord The y coordinate of the lower right corner of the rectangle.
$color The color of the rectangle. This must be a color that has been previously allocated to the $image.
Rectangles are plotted from upper left to lower right. Remember that the coordinate 0,0 starts at the upper right corner of the image, not in the lower right corner as is normally done when plotting in mathematics.
This next script uses lines, text, and rectangles to create a dynamic bar graph. You can plug various numeric values into the graph and specify a size and labels for the image. The graph automatically changes scale depending on the numeric values you enter. Figure 11-8 illustrates the graph-entry screen.
Script 11 5 gd_graph.php
[View full width]
1. <? 2. if(!isset($render)) { 3. ?> 4. <form action=gd_chart.php method=post> 5. <br>Values (enter numbers seperated by a comma): 6. <br><textarea cols="40" rows="4" name="values_in">50,100,150,20,75,23,55,200,135,63,103,163</textarea> 7. <br>Labels (enter labels seperated by a comma): 8. <br><textarea cols="40" rows="4" name="labels_in">Jan,Feb,Mar,Apr,May,Jun,Jul,
Figure 11-8. gd_graph.php before submitting values
| LINE | DESCRIPTION |
|---|---|
| 2 | Check to see if the $render variable is set. If it is not, then execute lines 3 15, else execute from line 16 to the end of the script. |
| 3 15 | Print out a standard HTML form asking for some values for the script. You can specify:
The script enters some values as a default for testing. |
| 17 | Take the values entered from the form and turn them into an array using the explode() function and assigning the array to the $values variable. |
| 18 | Take the labels entered from the form and turn them into an array using the explode() function and assigning the array to the $labels variable. |
| 19 | Determine the offset for the x-axis, which is 1/10th the total width of the chart. This offset allows for room for some text on the left side of the chart. 1/10th is an arbitrary number that works well for charts that are 300 pixels wide or larger. |
| 20 | Determine the offset for the y-axis, which is 1/10th the total height of the chart. This offset allows for room for some text on the bottom of the chart. |
| 22 30 | Determine the appropriate font sizes for the chart. The chart uses three sizes: small, medium, and large. If the chart is smaller than 400 x 400, then use smaller fonts. Otherwise, use larger fonts. |
| 32 | Create the base image using the width and height obtained from the form. |
| 34 36 | Allocate three colors to the image: white, blue, and red. The white here (RBG: 235,235,235) is actually a little grey so that the chart stands out better from the page. |
| 38 | Initialize the variable $greatest with 0. |
| 39 43 | Use a for loop to loop through the $values array and find the highest value. Once we know the largest number that has to be plotted, we can determine the scale of the chart. Note that, on line 40, the script trims any whitespace from the numerical value. This is to avoid errors if users separate their values when they enter them into the form with spaces in addition to commas. |
| 45 | Determine the scale of the chart by taking 80 percent of the largest value divided by the height. This creates a scale that allows the largest bar on the graph to occupy 80 percent of the height. |
| 46 | Determine the horizontal spacing for the individual bars in the chart by rounding off the width minus the width offset (which gives us the total amount of space available to the bars), then dividing it by the number of values that need to be charted, and finally dividing that number by two, since we want to create an equal space-bar ratio. |
| 47 | Determine the width of the bar. Here we set it to the same as the spacing, but you may find you need to alter it a bit for your specific chart. If you do alter it, take into account that the above line allocates half of the space to spacing. You may need to alter that line as well. |
| 49 | Initialize the variable $x to be five pixels more than the offset. This allows you to start the first bar five pixels away from the edge that you allocated as space for text. |
| 50 57 | Create a for loop that loops through $values array and draws the bars on the bar graph. |
| 51 | Determine the base y coordinate of the bar. This is a bit tricky, because the script automatically scales the presentation of the bars depending on the size of the greatest value. To determine the base y coordinate, you need to subtract the height from the size of the value multiplied by the scale. If the value was 10, then it would automatically be scaled down to 8. You then subtract the y offset (for the extra space at the bottom for text) and the overall height of the image (because the GD library uses the top left corner of the image as the 0,0 point instead of the lower left corner). The script is calculating how far the bar should start from the TOP of the image, rather than how long the bar should actually be (which would, of course, be easier, but the GD library doesn't seem to want to let you do it that way). |
| 52 | Create the bar using the ImageFilledRectangle() function. The first two coordinate arguments ($x, and $y) plot the top left corner of the rectangle. The second two coordinate arguments ($x + $barwidth, and $height $yoffset) plot the bottom right of the rectangle. |
| 53 | Write the numerical value of the bar above the bar using the ImageString() function. The y coordinate is listed as $y 12 so that the value is written 12 pixels above the bar itself. Remember that the script calculates how far from the top of the image the text should be written, not how far from the top of the bar. |
| 54 | Use the trim() function to trim any whitespace from around the label. |
| 55 | Write the label of the current bar at the bottom of the bar. Notice that the y coordinate is $height $yoffset + 2. That puts the label two pixels BELOW the top of the whitespace along the bottom of the image. |
| 56 | Increment the value of the next x coordinate so that it allows room for ample space between the bars. You'll have to modify this line in addition to lines 46 and 47 if you want to muck about with the spacing. Note that in most cases the way it is coded here should work fine. |
| 57 | Close the for loop. |
| 59 | Initialize the variable $ticks_every. |
| 60 62 | Create a for loop to determine the scale of the tick marks that occur on the bars. The tick marks are actually lines that are the same color as the background of the image. They are drawn over the bars to make the bars look like equally segmented blocks. Since it's conceivable that you could have values that are in the tens or in the thousands, you would not automatically want to have a tick mark every 10 units. This for loop is a cheap way to determine how many "ticks" should be spaced in between tick lines. It takes the greatest value and computes the log10 of that value. Each time it does so and the value is less than $i, it adds a "0" to the $ticks_every function. Basically, if the greatest value is 1 to 316, then there is a line every 10 ticks (not necessarily pixels, because you need to take into account scaling). From 316 to 3162, it uses tick marks every 100 ticks, etc. It's not an exact science, but it gives pretty good results. |
| 64 69 | Create a for loop that draws "tick" marks on the bars, as well as numbers along the y axis of the graph, spaced according to the interval defined in $ticks_every. |
| 65 | Calculate the y coordinate for the tick mark. |
| 66 | Draw a short line to the left of the offset. This short blue line is used as a divider between the numerical scale that is displayed along the y axis of the chart. |
| 67 | Draw a long line across the image to divide the bars into equal easily-readable segments. |
| 68 | Display the "tick" number to the left of the y axis for the chart. |
| 69 | Close the for loop. |
| 71 | Draw the blue x-axis line across the bottom of the image (between the bars and their labels). |
| 72 | Draw the blue y-axis line along the right side of the image (between the unit numbers and the bars). |
| 74 | Display the label for x-axis. In the default case, this is "Month." |
| 75 | Display the label for the y-axis. In the default case, this is "Widget Production in Thousands." |
| 77 | Send the image headers to the user's browser. |
| 78 | Display the image, $image, that you have created. |
| 79 | Destroy the image from the server memory, since it has already been sent to the browser. |
| 80 | Close the if statement started on line 2. |
Figure 11-9 shows example output for the script.
Figure 11-9. gd_graph.php after submitting values
| |
| Top |
EAN: 2147483647
Pages: 92