S. Friss – Design + TechnologyFreelance Interactive Design and Development

I've been looking for a quick and easy to use captcha solution, but I found a bunch of tutorials and difficult, or overly complicated implementations. I wanted all the options such as:

1.) random colors for the text and background, with the ability to still read the text
2.) rotated text with random fonts
3.) random shapes drawn in the background
4.) use of ttf fonts
5.) the ability to refresh the image
6.) control over how many letters to use and how many shapes to draw

So after some research, I decided to combine a bunch of approaches and came up with this one script file to use captcha. All you need is the captcha.php script and the fonts folder, which contains all the fonts that are used. The features I have are all of the above. There are variables in the script to allow you to customize it any way you want:

//The maximum number of letters to use in the captcha
$maxLetters         = 5;
//The name of the session variable where the captcha string will be stored
$sessionVarName     = "captcha_string";
//The width of the captcha image
$imageWidth         = 200;
//The height of the captcha image
$imageHeight         = 50;
//The number of random lines to draw in the background of the captcha image
$numberOfLines         = 10;
//The number of random elipses to draw in the background of the captcha image
$numberOfElipses     = 10;
//The type of image to output, can be jpg, gif, or png
$imageType            = "jpg";
 
//The font array, which contains fonts that will be picked at random
$fonts = array();
$fonts[0] = "fonts/arial.ttf";
$fonts[1] = "fonts/tiza.ttf";
$fonts[2] = "fonts/pointy.ttf";

To add fonts just drop the ttf file in the fonts folder and add an entry to the array. To implement this is very simple all you need is this:

 
<!--
<img src="captcha.php" id="captchaImage" class="captchaImage"/>
<script> 
document.write("
<a href='#' 
onclick='document.getElementById(\"captchaImage\").src=\"captcha.php\"; 
return false;' style='outline: none;'><img src='refresh.gif' border='0'/>
</a>"); 
</script>
<br/>
<label for="captchaText" class="captchaLabel">CAPTCHA:</label>
<input type="text" id="captchaText" name="captchaText" class="captchaText"/>
-->
 

I also threw in a little utility file you can use (captchaUtil.php), it has one function,which looks like this:

 
outputCaptchaFields(
     $captchaLabel = "CAPTCHA:",
     $imageClass = "",
     $labelClass = "",
     $inputClass = "",
     $imageID = "captchaImage",
     $labelID = "captchaLabel",
     $inputID = "captchaText",
     $refreshImage="refresh.gif"
)
 

and will output the captcha fields for you. The parameters are self-explanatory.

Very simple and straightforward.

download: captcha.rar (691.08KB) added: 14/04/2008 clicks: 310 description: A simple and powerful captcha implementation

Enjoy.