Programming Tutorials
PHP Generated Dynamic Images
Table of Contents
Have you ever seen an image that counts down a date, a signature that displays game ratings, or a little avatar that tells you what browser you are using? These are all examples of dynamic images, usually created with PHP.
In this tutorial, I will be explaining how this is done in PHP, and providing several working code examples.
First decide what you want image you want to make dynamic. Also make sure to make the image PNG format so that we can work with it using the GD library packaged with PHP. For this tutorial, I have made this image:
Now that we have that, lets upload it to our server and create a file called 'dynamic.php' in the same directory. Open that file, and I'll walk you through the code.
Header
The first thing we want to do is set in our PHP tags, and declare a document type:
<?php header("Content-type: image/png"); // Tell the browser to display the page as an image. ?>
Grab the IP
Now we need to decide what we want to do with this dynamic signature. I will be making one that displays your IP as you view the page. So here is the code to grab a user's IP, and store it in a variable.
$user_ip = $_SERVER['REMOTE_ADDR']; // Grab the user's IP
Next is deciding what we want to say, and where to put it on the image. The displacement is in pixels, so you should use a program like photoshop to find out how many pixels you want:
$string = "Your IP: $user_ip"; // Our string to put on the image $dx = 14; $dy = 8; // Displacement of the text from the top right corner // This should be measured in Pixels.
Colors
The next block of code will create an instance of our PNG for the GD Library to work with, and set the text color we want to use on our image. The text color must be in RGB Values, so I would recommend you either pick the color in photoshop and then find the RGB, or use a chart like the one found at RGB Color Values. We will then set a font size between one and five, where five is larger than one. Here is the code:
$image = imagecreatefrompng ( "sign.png" ); // We want to create an instance of our image to work with $text_color = imagecolorallocate ( $image, 81, 186, 216 ); // The imagecolorallocate function only accepts RGB values. // If you need to convert hex to rgb, check the PHP Documentation $font_size = 2; // Needs to be between 1 and 5.
The final block of code will put the text on to the dynamic image, send the image to the browser, and then destroy the instance of it that we made.
Text Editing the Image
imagestring ( $image, $font_size, $dx, $dy, $string, $text_color ); // The actual function that puts our string on to the image. imagepng ( $image ); // Sends our image to the browser. imagedestroy ( $image ); /* Not required, but good practice. The image gets destroyed at the end of the script anyways */
Final Version of PHP Generated Image
Here is the final code:
<?php header("Content-type: image/png"); // Tell the browser to display the page as an image. $user_ip = $_SERVER["REMOTE_ADDR"]; // Grab the user's IP Address. $string = "Your IP: $user_ip"; // Our string to put on the image $dx = 14; $dy = 8; /* Displacement of the text from the top right corner This should be measured in Pixels. */ $image = imagecreatefrompng ( "sign.png" ); // We want to create an instance of our image to work with $text_color = imagecolorallocate ( $image, 81, 186, 216 ); /* The imagecolorallocate function only accepts RGB values. If you need to convert hex to rgb, check the PHP Documentation */ $font_size = 2; // Needs to be between 1 and 5. imagestring ( $image, $font_size, $dx, $dy, $string, $text_color ); // The actual function that puts our string on to the image. imagepng ( $image ); // Sends our image to the browser. imagedestroy ( $image ); /* Not required, but good practice. The image gets destroyed at the end of the script anyways */ ?>
And here is a screenshot of the working image:
I hope you enjoyed this tutorial, and if you have any questions or comments be sure to visit our programming forums and discuss it!
Other Examples
Also, here is an example of the same script using a countdown:
<?php header("Content-type: image/png"); // Tell the browser to display the page as an image. // Define your target date here $targetYear = 2008; $targetMonth = 12; $targetDay = 18; $targetHour = 00; $targetMinute= 00; $targetSecond= 00; date_default_timezone_set ( "America/Los_Angeles" ); // Sets the default time zone, in this case GMT -08 $dateFormat = ( "Y-m-d H:i:s" ); // Check the PHP Documentation for date uses. $targetDate = mktime ( $targetHour, $targetMinute, $targetSecond, $targetMonth, $targetDay, $targetYear ); // Sets up our timer $actualDate = time(); // Gets the actual date $secondsDiff = $targetDate - $actualDate; // Finds the difference between the target date and the actual date // These do some simple arithmatic to get days, hours, and minutes out of seconds. $remainingDay = floor ( $secondsDiff / 60 / 60 / 24); $remainingHour = floor ( ( $secondsDiff - ( $remainingDay *60 * 60 * 24) ) / 60 / 60 ); $remainingMinutes = floor ( ( $secondsDiff - ( $remainingDay *60 * 60 * 24) - ( $remainingHour * 60 * 60 ) ) / 60 ); $remainingSeconds = floor ( ( $secondsDiff - ( $remainingDay *60 * 60 * 24) - ( $remainingHour * 60 * 60 ) ) - ( $remainingMinutes * 60 ) ); $targetDateDisplay = date($dateFormat,$targetDate); $actualDateDisplay = date($dateFormat,$actualDate); // Sets up displays of actual and target $string = $remainingDay." Days, ".$remainingHour." Hours, ".$remainingMinutes." Minutes, ".$remainingSeconds." Seconds"; $string2 = "Until my birthday"; // Two strings $dx = 10; $dy = 10; /* Displacement of the text from the top right corner This should be measured in Pixels. */ $image = imagecreatefrompng ( "baboon.png" ); // We want to create an instance of our image to work with $text_color = imagecolorallocate ( $image, 255, 255, 255 ); /* The imagecolorallocate function only accepts RGB values. If you need to convert hex to rgb, check the PHP Documentation */ $font_size = 2; // Needs to be between 1 and 5. imagestring ( $image, $font_size, $dx, $dy, $string, $text_color ); imagestring ( $image, $font_size - 1, $dx, $dy + 12, $string2, $text_color ); // The actual function that puts our string on to the image. imagepng ( $image ); // Sends our image to the browser. imagedestroy ( $image ); /* Not required, but good practice. The image gets destroyed at the end of the script anyways */ ?>
.htaccess
One of the things many people use this for is creating dynamic rating signatures. The problem with this is, many forums do not let you use PHP extensions in image tags. There is a solution! We have another great tutorial written by Baran Ornarli that will explain how to trick the browser into parsing a png image. You can view it here Htaccess Mod Rewrite Tutorial
Post new comment