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.
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment