Extensions to support drawing: The PHP Extension Class Library (PECL) provides ImageMagick to support drawing; ImageMagick is preferred for drawing gif's (including animated gif's) (more on ImageMagick, including examples of what it can do).
The text uses the GD2 library (which has moved to http://www.libgd.org/Main_Page, different from the text URL). "GD is an open source code library for the dynamic creation of images by programmers. GD creates PNG, JPEG and GIF images, among other formats. GD is commonly used to generate charts, graphics, thumbnails, and most anything else, on the fly. While not restricted to use on the web, the most common applications of GD involve web site development."
What does GD stand for? From the GDlibrary: In gd 1.0, it stood for "gif draw." After the Unisys patent on the LZW compression used in GIF came to light and GIF support was dropped, it did not officially stand for anything, but let's just say "graphics draw" and leave it at that. (GIF support is back, thanks to the expiration of the patent, but gd can draw much more than GIFs.) Instructions for downloading a PHP "binder" for GD (written in C) are available on the GD site and in the text (p. 452).
Image formats: GD formats include JPEG (Joint Photographic Experts Group—site), PNG (Portable Network Graphics—site), and WBMP (Wireless Bitmap, not in wide use). File descriptions, compression, and uses are described in the text and online. Use JPEG (also JPG) for photographic images, with lots of color variation (shades and shadows, for example), and PNG for graphics (blocks of color, text). PNG replaces GIF, allowing transparency, interlacing, and gamma corrections, but it doesn't support animations. For that you use GIF (Graphics Interchange Format) of an extension to PNG called MNG (but avoid animated GIF's anyway, as these tend to be large, clunky, and soooo 1995). See, however, the text description of UNISYS's licensing fees for GIFs (patent now expired) which have been attacked by gif users (archival).
Process: To create an image in PHP, create a canvas on which to work, draw shapes or printing text on the canvas, output the final graphic, and cleanup. Listing 21.1 provides a simple illustration (which will work as soon as I get GD2 set up properly!)
<?php
// set up image
$height = 200;
$width = 200;
$im = ImageCreateTrueColor($width, $height);
$white = ImageColorAllocate ($im, 255, 255, 255);
$blue = ImageColorAllocate ($im, 0, 0, 64);
// draw on image
ImageFill($im, 0, 0, $blue);
ImageLine($im, 0, 0, $width, $height, $white);
ImageString($im, 4, 50, 150, 'Sales', $white);
// output image
Header ('Content-type: image/png');
ImagePng ($im);
// clean up
ImageDestroy($im);
?>.
This is called from a reference to the php script (simplegraph.php), as
<img src="simplegraph.php" alt="Sales going down" width="200" height="200" class="code" />
The illustration uses ImageCreateTrueColor() to create a canvas, ImageColorAllocate(), to set colors using RGB levels (0-255), ImageFill() to fill background color, ImageLine() to draw a line, and ImageString() to insert text. The Header() function sends an HTTP header, and it is used here (p. 458) to prepare for the image, which is then sent with ImagePng(). Cleanup consists of a call to destroy the image, ImageDestroy
().
Within-page image generation: Images need to be included in the http header (above). If you include a php script as the source of the image file (as was done to call the script in liasting 21.1), the image created by the script will be retrieved and inserted directly.
Text and Fonts: The example in listing 21.2 uses true-type fonts over a pre-created button image to create bottons on the fly. You could also use the same image as a background in a CSS list or link element, but you wouldn't have the graphic type effects (anti-aliased text), nor could you adjust the font size to fit the pre-sized button on the fly. The example (p. 460, fig. 21.4) uses a form to enter button color and text, but it could come from any source; listing 21.2 then takes the form output for text and color and uses it. The listing does the math to scale down font size of the text so that it will fit (issuing a warning if the font would be too small), and the rest of the math to center the text horizontally and vertically within the dimensions of the button image. ImageTTFTEXT() is used to creat the final text. ImageTTFBBOX() (p. 465) is particularly interesting: it takes a font size, style, angle of slant, and returns the coordinates of the box into which this will fit. Note the discussion of intracies of this box, p. 466.
Figures and Data: Drawing is illustrated in listing 21.3, which uses bar graph data to produce a figure. Here, a user votes in a poll (via a form), adding a vote to a database; the database totals are then made into a bar chart. The scripts and discussion span p. 468-476; they are broken into 4 parts. Part one converts the individual vote into a modification of the database, and returns the stored vote totals (listing 21.5.1, p. 471). Part two sets initial values for the bar chart, such as thickness of each bar, spacing between bars, title size, font sizes, etc. You might want to sketch these, or to create a model in excel to get appropriate values. Part 3 (listing 21.5.3, p. 473-4) sets up the chart, including outline, colors, background, and title. Part 4 (listing 21.5.4, p. 475-6) draws the bars and labels for each, including outlines (stroke), displays the image, and does the image cleanup.