Setting Up the Image
When creating any image, the first thing you have to do is set up your colors. We need to define a new image handler, allocate a color pallete and allocate some colors (specifically background, text, and border). The code is easy and fairly self explanatory, so I’ll just give it to you as is.
Code:
## Create the image
$img = imagecreate($img_width, $img_height) or die(‘Can not initialize GD Image Library’);
## Define Background & Text colors
list($br, $bg, $bb) = explode(‘.’, $bg_colors[rand(0, count($bg_colors)-1)]);
list($tr, $tg, $tb) = explode(‘.’, $font_colors[rand(0, count($font_colors)-1)]);
$bg_color = imagecolorallocate($img, $br, $bg, $bb);
$txt_color = imagecolorallocate($img, $tr, $tg, $tb);
$line_clr = imagecolorallocate($img, 0, 0, 0);
To start the image, you have to create an image handler and define its width and height. Our code tries to create the image, and if it doesn’t it will kill the function (and your script) with the output:
Can not initialize GD Image Library
We hold image references in the $img var for reference in all of our image functions. The next five (5) lines are a little more intricate:
1. Generate a random background color RGB value
* Explode our random array value on the “.” giving us 3 numeric values from 0 to 255
* Store each as the R G and B values for the background
2. Generate a random text color RGB value
3. Allocate the background color
* It is worth noting that this line fills the image with that color. So this line MUST come before the other color allocation calls. Otherwise, you’d fill your image background with the wrong color.
4. Allocate the text color
5. Allocate the border color (black)
On to the fun stuff….
Border or No?
The following four lines of code are optional and are just used to create an aesthetically pleasing image. They create a “border” around your image. You can achieve the same effect with CSS, but the choice is yours.
To generate the border, we draw 4 lines:
* Top Left –> Top Right
* Top Left –> Bottom Left
* Top Right –> Bottom Right
* Bottom Left –> Bottom Right
The code to achieve this is as follows:
Image Border Code:
## Create box around image
imageline($img, 0, 0, $img_width, 0, $line_clr);
# Top left to Top Right
imageline($img, 0, 0, 0, $img_height, $line_clr);
# Top left to Bottom Left
imageline($img, 0, $img_height-1, $img_width, $img_height-1, $line_clr);
# Bottom Left to Bottom Right
imageline($img, $img_width-1, 0, $img_width-1, $img_height, $line_clr);
# Top Right to Bottom Right
Write the string on the image
This step takes a lot of explanation, so please read it carefully. The following code is randomly placing the text vertically, while spacing it out horizontally so it’s readable. It also randomly rotates the character. Here’s the code:
Code:
## Write string into image
for($i=0; $i<strlen($rnd_str); $i++)
{
imagettftext($img, $fnt_size, rand(-30, 30),
–>(($i*$fnt_size)+$let_space),
–>rand($fnt_size+5, ($img_height-$fnt_size-5)),
–>$txt_color, $font, $rnd_str{$i});
}
Let’s take some time and look at exactly what is going on. The random function should really be straightforward by now. The arithmetic is a little weird, but let’s look at it:
Write Character to Image:
imagettftext($img, $fnt_size, rand(-30, 30),
–>(($i*$fnt_size)+$let_space),
–>rand($fnt_size+5, ($img_height-$fnt_size-5)),
–>$txt_color, $font, $rnd_str{$i});
As you notice, we first define what image handler ($img) to use, then we define which font-size (previously declared) to use. Now comes the fun stuff. The rotation is a random integer between -30 and 30. If you think of a circle, and a cross splitting it into four sections (see figure 1), any positive integer rotates clockwise, and negative integers rotates counter-clockwise. For simplicity, we rotate a maximum of 30 degrees counter-clockwise, and 30 degrees clockwise. So a random integer between -30 and 30 will give us a random rotation.
The next item multiplies our current character number (0-5) by the font size, and adds our letter spacing to it. This is to give the X coordinate position (horizontal position) in the image. We multiply by the font to guarantee that the letter will be far enough over that it’s still legible. The next function randomizes the Y position (vertical) for between 5 pixels past the font-size, and far enough off the bottom edge that the entire letter is legible.
Then the text color and font are specified, and the last parameter passed is the string (or in our case the character) that we want to be written. This is within a loop, so it will do this for each character we have in the image. The next two lines are extremely important:
Code:
imagegif($img, ‘rand_image.gif’);
return $rnd_str;
} // End of our gen_rand_img() function
The Function is complete!!
That’s right, the function used to create our image is done. The imagegif function takes at least one parameter and at most two. It will always take the parameter of the image handler ($img) that you’ve been working with. The second option is of importance. If you specify a string (like I have here) an image will be made with that name (and path). You can specify a path with it, but for simplicity I just used the same directory.
The last line of our function returns our “random” string. We will use this in our form for checking. The next–and final–steps are to create the form and finally do the verification!!
