17.6.2. ProblemYou want to create an image based on an existing image template and dynamic data (typically text). For instance, you want to create a hit counter. 17.6.3. SolutionLoad the template image, find the correct position to properly center your text, add the text to the canvas, and send the image to the browser: // Configuration settings $image = ImageCreateFromPNG('button.png'); $text = $_GET['text']; $font = ImagePSLoadFont('Times'); $size = 24; $color = ImageColorAllocate($image, 0, 0, 0); // black $bg_color = ImageColorAllocate($image, 255, 255, 255); // white // Print-centered text list($x, $y) = pc_ImagePSCenter($image, $text, $font, $size); ImagePSText($image, $text, $font, $size, $color, $bg_color, $x, $y); // Send image header('Content-type: image/png'); ImagePNG($image); // Clean up ImagePSFreeFont($font); ImageDestroy($image); 17.6.4. DiscussionBuilding dynamic images with GD is easy; all you need to do is combine a few recipes together. At the top of the code in the Solution, you load in an image from a stock template button; it acts as the background on which you overlay the text. We define the text to come directly from the query string. Alternatively, you can pull the string from a database (in the case of access counters) or a remote server (stock quotes or weather report icons). After that, continue with the other settings: loading a font and specifying its size, color, and background color. Before printing the text, however, you need to compute its position; pc_ImagePSCenter( ) from Recipe 17.5 nicely solves this task. Last, serve the image, and deallocate the font and image from memory. For example, the following code generates a page of HTML and image tags using dynamic buttons, as shown in Figure 17-9: <?php if (isset($_GET['button'])) { // Configuration settings $image = ImageCreateFromPNG('button.png'); $text = $_GET['button']; // dynamically generated text $font = ImagePSLoadFont('Times'); $size = 24; $color = ImageColorAllocate($image, 0, 0, 0); // black $bg_color = ImageColorAllocate($image, 255, 255, 255); // white // Print centered text list($x, $y) = pc_ImagePSCenter($image, $text, $font, $size); ImagePSText($image, $text, $font, $size, $color, $bg_color, $x, $y); // Send image header('Content-type: image/png'); ImagePNG($image); // Clean up ImagePSFreeFont($font); ImageDestroy($image); $url = htmlentities($_SERVER['PHP_SELF']); } else { ?> <html> <head> <title>Sample Button Page</title> </head> <body> <img src="/books/3/131/1/html/2/<?php echo $url; ?>?button=Previous" alt="Previous" width="132" height="46"> <img src="/books/3/131/1/html/2/<?php echo $url; ?>?button=Next" alt="Next" width="132" height="46"> </body> </html> <?php } ?> Sample button pageIn this script, if a value is passed in for $_GET['button'], you generate a button and send out the PNG. If $_GET['button'] isn't set, you print a basic HTML page with two embedded calls back to the script with requests for button images one for a Previous button and one for a Next button. A more general solution is to create a separate button.php page that returns only graphics and set the image source to point at that page. 17.6.5. See AlsoRecipe 17.4 for more on drawing text; Recipe 17.5 for more on centering text; Chapter 9, "Graphics," in Programming PHP, Second Edition, by Rasmus Lerdorf, Kevin Tatroe, and Peter MacIntyre (O'Reilly). |