PHP Graphics Building Dynamic Images - Web Development and Design | Tutorial for Java, PHP, HTML, Javascript PHP Graphics Building Dynamic Images - Web Development and Design | Tutorial for Java, PHP, HTML, Javascript

Breaking

Post Top Ad

Post Top Ad

Sunday, June 23, 2019

PHP Graphics Building Dynamic Images

PHP Graphics 


Building Dynamic Images


Problem

You 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.

Solution

Load 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:

       include 'imageftcenter.php';

       // Configuration settings
       $image = ImageCreateFromPNG('/path/to/button.png'); // Template image
       $size = 24;
       $angle = 0;
       $color = 0x000000;
       $fontfile = '/path/to/font.ttf'; // Edit accordingly
       $text = $_GET['text']; // Or any other source

       // Print-centered text
       list($x, $y) = ImageFTCenter($image, $size, $angle, $fontfile, $text);
       ImageFTText($image, $size, $angle, $x, $y, $color, $fontfile, $text);

       // Preserve Transparency
       ImageColorTransparent($image,
              ImageColorAllocateAlpha($image, 0, 0, 0, 127));
       ImageAlphaBlending($image, false);
       ImageSaveAlpha($image, true);

       // Send image
       header('Content-type: image/png');
       ImagePNG($image);

       // Clean up
       ImagePSFreeFont($font);
       ImageDestroy($image);

Discussion

Building dynamic images with GD is easy; all you need to do is combine a few recipes. 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. You 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; ImageFTCenter() nicely solves this task. Last, serve the image, and deallocate the image from memory.

For example, the following code generates a page of HTML and image tags using dynamic buttons, as shown in Figure:

       <?php
       if (isset($_GET['button'])) {

              // Configuration settings
              $image = ImageCreateFromPNG(__DIR__ . '/button.png');
              $text = $_GET['button']; // dynamically generated text
              $font = '/Library/Fonts/Hei.ttf';
              $size = 24;
              $color = 0x000000;
              $angle = 0;

              // Print-centered text
              list($x, $y) = ImageFTCenter($image, $size, $angle, $font, $text);
              ImageFTText($image, $size, $angle, $x, $y, $color, $font, $text);

              // Preserve Transparency
              ImageColorTransparent($image,
                     ImageColorAllocateAlpha($image, 0, 0, 0, 127));
              ImageAlphaBlending($image, false);
              ImageSaveAlpha($image, true);

              // Send image
              header('Content-type: image/png');
              ImagePNG($image);

              // Clean up
              ImagePSFreeFont($font);
              ImageDestroy($image);

       } else {
              $url = htmlentities($_SERVER['PHP_SELF']);
       ?>
       <html>
       <head>
              <title>Sample Button Page</title>
       </head>
       <body>
              <img src="<?php echo $url; ?>?button=Previous"
                     alt="Previous" width="132" height="46">
              <img src="<?php echo $url; ?>?button=Next"
                     alt="Next" width="132" height="46">
       </body>
       </html>
       <?php
       }
       ?>
Figure Sample button page

In 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.



No comments:

Post a Comment

Post Top Ad