Page 1 of 1

Creating a CAPTCHA using the GD library A detailed Explanation of the functions used Rate Topic: -----

#1 JBrace1990  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 109
  • View blog
  • Posts: 760
  • Joined: 09-March 08

Posted 09 June 2008 - 07:30 AM

The result of this CAPTCHA can be found Here.

To start off, if you've never used the GD library before, don't worry, this tutorial is written with you in mind.

To start off, What is it a CAPTCHA always has? random numbers/letters. For this specific CAPTCHA, i've decided to use mktime(), and multiply it by microtime(). These functions both rely on the servers time, with mktime() getting the current UNIX timestamp in Seconds, and microtime() getting the current UNIX Timestamp with Microseconds. I decided to go with them, because it creates a more random string then just making a random one.

$md5 = md5(microtime() * mktime());  


I also decided to MD5 the result, as numbers and letters are in CAPTCHAs. The next step in this process is creating the image. there's a built in function called imagecreatetruecolor(), which works perfectly for this simple CAPTCHA. Since it needs to be called multiple times, i've assigned it to the variable $img, as seen below.

$img = imagecreatetruecolor(55,25); 


The CAPTCHA doesn't have to be large, so 55 pixels by 25 pixels is big enough for this.

Next, we need to allocate colors to use in the image. since it is going to have a black background, i've decided to use white for the text and lines.

$color1 = imagecolorallocate($img, 255, 255, 255);


imagecolorallocate() adds a color to an image in RGB format. 0,0,0 is Black, and 255,255,255 is white.

the next step is to cut down the 32 character string made with the MD5 function into a 5 character string, and then store it into a Session.

$split = substr($md5,0,5);
$_SESSION['string'] = $split;


As you can see, I stored it in a Session named String (you an change the name if you need to). Now that the string has been cut down, we are going to add the 5 characters into the image at a given point.

imagestring($img, 40, 5, 5, $split, $color1); 


imagestring() is the simple way of adding text to an image, but you can go with a more advanced GD function, such as imagettftext, if you want it to look different.

Now, this wouldn't exactly be a strong CAPTCHA if it didn't have some random lines in it, right? Well, i've thought of that too.

$line1randX = mt_rand(0,55);
$line1randY = mt_rand(0,25);
imageline($img,5,8,$line1randX,$line1randY,$color1);
imageline($img,15,15,40,15,$color1);


The first line is random, starting at the 5,8 mark, and going up to as far as the image allows. The second one goes right through the bottom of the text, making it more difficult for bots to read.

Finally, after we have made the image, We need to output it to the browser. Unless you include a heard function that tells the browser it is an image, it will display a bunch of ugly text. So, we need to set the header to a "image/jpeg" type and then display the image as a JPG file.

header("Content-type: image/jpeg");
imagejpeg($img);


Lastly, to free up system resources, we destroy the image after it has been used.

imagedestroy($img);


Congratulations, You know have your very first CAPTCHA! The final code is below, And can be used freely by any who wish to do so.

<?php
session_start();
$md5 = md5(microtime() * mktime()); 
$img = imagecreatetruecolor(55,25);
$color1 = imagecolorallocate($img, 255, 255, 255);
$split = substr($md5,0,5);
$_SESSION['string'] = $split;

imagestring($img, 40, 5, 5, $split, $color1); 
$line1randX = mt_rand(0,55);
$line1randY = mt_rand(0,25);
imageline($img,5,8,$line1randX,$line1randY,$color1);
imageline($img,15,15,40,15,$color1);

header("Content-type: image/jpeg");
imagejpeg($img);
imagedestroy($img);
?>


Is This A Good Question/Topic? 0
  • +

Page 1 of 1