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.

Here is a list of the functions used in this tutorial:

1. header()
2. imagecolorallocate()
3. imagettfbbox()
4. imagesx()
5. abs()
6. imagettftext()
7. imagepng()
8. imagedestroy()

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

$text = $_GET['text'];

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

$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
    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
    header('Content-type: image/png');
    $text = $_GET['text'];

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

    if($text == "ADMINISTRATOR"){ //if administrator
        $color = imagecolorallocate($im, 255, 0, 0); //red
    }
    else if($text == "MODERATOR"){ //if moderator
        $color = imagecolorallocate($im, 0, 0, 255); //blue
    }
    else if($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.