PHP:Tutorial - Getting to know GD

[John]

Title: Create dynamic userbars with GD

Introduction:
Have you ever been on aim and received a message from one of your friends with a big long URL followed by something like "John%20Is%20Stupid." You know what ever it is, wont be worth your time, but you click on it anyway to find someone goofy looking holding a sign and on it printed in big bold letters “John Is Stupid.” Ever wonder how they work? Chances are the script takes advantage of the GD functions. In this tutorial you will learn many GD functions that you can use to generate images. The goal for this tutorial is for you to generate a dynamic user bar like the one below.

Extreme Development - Home

Here is a list of the functions used in this tutorial:
header()
imagecolorallocate()
imagettfbbox()
imagesx()
abs()
imagettftext()
imagepng()
imagedestroy()

Solution:
The first thing you want to do is create the header type using the header function. Next you use the GD tools to create an image from a png file. In my case, I have userbar.png in the same directory as this script is in. The function imagecolorallocate creates a color using RGB (red-green-blue) format. The next three lines just set some basic information which isn’t that hard to understand. The last three lines to must of the work creating the image. The most important function here to pay attention to is imagettftext. The imagettftext requires 8 arguments which are the resource image, font size, the angle, x location, y location, font color, the actual font, and the string to be printed.

PHP Code:

<?php
header('Content-type: image/png');
$im = imagecreatefrompng ("userbar.png");
$color = imagecolorallocate($im, 0, 0, 0);
$text = "test";
$font = 'font.ttf';
$size = 8;
imagettftext($im, $size, 0, 15, 12, $color, $font, $text);
imagepng($im);
imagedestroy($im);
?>

Now that we have GD generating an image, lets make it a little more complex. We’ve added the

PHP Code:

$text = $_GET['text']; 


line to allow the user to enter a random string, and we have also added the

PHP Code:

 $size = imagettfbbox($fontsize, 0, $font, $text);
$dx = (imagesx($im)) - (abs($size[2]-$size[0])) - 20; 


Which calculate where to start printing the string on the image. The function imagettfbbox generates the length of the font string in pixels. If you were to use something like strlen($text) that would just return the number of characters in the string, which isn’t very usefull in this case. Next, we use the imagesx() function to determine the width of the image, we take that value and subtract the string length in pixels and subtract an extra 20 pixels to leave some room toward the end of the image.

PHP Code:

<?php
header('Content-type: image/png');
$text = $_GET['text'];
$im = imagecreatefrompng ("userbar.png");
$color = imagecolorallocate($im, 0, 0, 0);
$font = 'font.ttf';
$fontsize = 6;
$size = imagettfbbox($fontsize, 0, $font, $text); //calculate the pixel of the string
$dx = (imagesx($im)) - (abs($size[2]-$size[0])) - 20; //calculate the location to start the text
imagettftext($im, $fontsize, 0, $dx, 13, $color, $font, $text);
imagepng($im);
imagedestroy($im);
?>

At this point you could call yourself done. However you could add some extra features such as make the font color vary with the user input. Adding a simple if statement will accomplish this.

PHP Code:

<?php
header('Content-type: image/png');
$text = $_GET['text'];

$im = imagecreatefrompng ("userbar.png");

if($text == "ADMINISTRATOR"){ //if administrator
    $color = imagecolorallocate($im, 255, 0, 0); //red
    } 
elseif($text == "MODERATOR"){ //if moderator
    $color = imagecolorallocate($im, 0, 0, 255); //blue
    } 
elseif($text == "JUNKIE"){ //if junkie
    $color = imagecolorallocate($im, 0, 0, 0); //black
    } 
else { //something else...
    $color = imagecolorallocate($im, 0, 128, 0); //green
    }
    
$font = 'font.ttf'; //font file
$fontsize = 6; //font size
$stringsize = imagettfbbox($fontsize, 0, $font, $text); //calculate the pixel of the string
$dx = (imagesx($im)) - (abs($stringsize[2]-$stringsize[0])) - 20; //calculate the location to start the text
imagettftext($im, $fontsize, 0, $dx, 13, $color, $font, $text);
imagepng($im);
imagedestroy($im);
?>

Finally you can save this script as generator.php and display it in forums by using the html tags.

<img src="http://www.yourdomain.com/generator.php?text=JUNKIE" />

[John]

Here are two more scripts that take advantage of GD, I've posted these before but I figured i'll post them here to keep track of them.

Captcha Generator

PHP Code:

<?php
function RandomStringGenerator($length){
global $string;
    $pattern = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
if(empty($length)){
    $length = "10";
    }
for($i=0; $i<$length; $i++){
    $string .= $pattern{rand(0,61)};
    }

return $string;
}

function CaptchaGenerator(){
global $string;
RandomStringGenerator();
header("Content-type: image/png");
$im = @imagecreate(100, 50)
   or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 0, 0, 0);
$text_color = imagecolorallocate($im, 255, 0, 0);
imagestring($im, 10, 5, 5,  $string, $text_color);
imagepng($im);
imagedestroy($im);
}

CaptchaGenerator(); 
?>

Signature Rotator/Banner Rotator:

PHP Code:

<?php

$folder = './';

$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';

$img = null;

if (substr($folder,-1) != '/') {
   $folder = $folder.'/';
}

if (isset($_GET['img'])) {
   $imageInfo = pathinfo($_GET['img']);
   if (
       isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
       file_exists( $folder.$imageInfo['basename'] )
   ) {
       $img = $folder.$imageInfo['basename'];
   }
} else {
   $fileList = array();
   $handle = opendir($folder);
   while ( false !== ( $file = readdir($handle) ) ) {
       $file_info = pathinfo($file);
       if (
           isset( $extList[ strtolower( $file_info['extension'] ) ] )
       ) {
           $fileList[] = $file;
       }
   }
   closedir($handle);

   if (count($fileList) > 0) {
       $imageNumber = time() % count($fileList);
       $img = $folder.$fileList[$imageNumber];
   }
}

if ($img!=null) {
   $imageInfo = pathinfo($img);
   $contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
   header ($contentType);
   readfile($img);
} else {
   if ( function_exists('imagecreate') ) {
       header ("Content-type: image/png");
       $im = @imagecreate (100, 100)
           or die ("Cannot initialize new GD image stream");
       $background_color = imagecolorallocate ($im, 255, 255, 255);
       $text_color = imagecolorallocate ($im, 0,0,0);
       imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
       imagepng ($im);
       imagedestroy($im);
   }
}

?>

To add a border to text:

PHP Code:

/**
 * Writes the given text with a border into the image using TrueType fonts.
 * @author John Ciacia < John@extreme-hq.com >
 * @param image An image resource.
 * @param size The font size.
 * @param angle The angle in degrees to rotate the text.
 * @param x Upper left corner of the text.
 * @param y Lower left corner of the text.
 * @param textcolor This is the color of the main text.
 * @param strokecolor This is the color of the text border.
 * @param fontfile The path to the TrueType font you wish to use.
 * @param text The text string in UTF-8 encoding.
 * @param px Number of pixels the text border will be.
 * @return Returns an array with 8 elements representing four points making the bounding 
 *         box of the text. The order of the points is lower left, lower right, upper right, 
 *         upper left. The points are relative to the text regardless of the angle, so 
 *         "upper left" means in the top left-hand corner when you see the text horizontally.
 * @see http://us.php.net/manual/en/function.imagettftext.php
 * @see http://forum.codecall.net
 * @see http://www.extreme-hq.com
 */
function imagettfstroketext(&$image, $size, $angle, $x, $y, &$textcolor, &$strokecolor, $fontfile, $text, $px) {

    for($c1 = ($x-abs($px)); $c1 <= ($x+abs($px)); $c1++)
        for($c2 = ($y-abs($px)); $c2 <= ($y+abs($px)); $c2++)
            $bg = imagettftext($image, $size, $angle, $c1, $c2, $strokecolor, $fontfile, $text);

   return imagettftext($image, $size, $angle, $x, $y, $textcolor, $fontfile, $text);
} 


Usage:

PHP Code:

$img = imagecreatefrompng("/home/john/Desktop/test.png");
$font_color = imagecolorallocate($img, 0, 0, 0);
$stroke_color = imagecolorallocate($img, 255, 0, 0);
$font = "/home/john/Desktop/ABSTRACT.TTF";
$txt = "This is a test..";
$px = 2;
imagettfstroketext($img, 10, 0, 10, 50, $font_color, $stroke_color, $font, $txt, $px); 


Enjoy!

[Jordan]

Nice Tutorial, very well done.

[TcM]

:0 Im impressed I wish I knew PHP

[John]

Thanks for the comments, ive added 2 more scripts to this section that you've already seen but also take advantage of GD so i figured they were worth showing

[TcM]

I have a problem with the 1st tutorial.. I made this:-

<html>
<img src="http://localhost/generator.php?text=ADMINISTRATOR" />
</html>

Right? its localhost because I ran a Server on my PC to try this.. and it supports PHP but the image link is showing as broken.. any idea why?
I even tried to upload it to a hosting site that supports php.. still broken link...

[Jordan]

I'm betting you do not have GD working or compiled into your system. Is it a Windows System?

Create a PHP file named phpinfo.php and put this in it:

PHP Code:

<?php
phpinfo();
?>

Then goto http://localhost/phpinfo.php - this lists everything that your PHP can do. Search for GD.