PHP script to generate captcha image and how to use in a web form

This is a simple captcha script which we will use to develop using PHP and GD library functions. To keep the script simple we have not used many powerful tools available in GD library. After understanding this basic tutorial we can go for advance captcha generation script. There are five files used,

captcha-image.php , the main PHP script which generates the captcha image.
captcha-demo1.php , the form which display the captcha image generated by above PHP script
captcha-image-adv.php , PHP script which generates the Advanced captcha image.
captcha-demo2.php , the form which display the Advanced captcha image
captcha-demo-data.php, output of is displayed once the user submit the form.

We will discuss each file but before that you can check the demo here. Download source code of this demo at end of the page

Captcha validation without reloading the page. By using JQuery we can validate the captcha entry of the user. We will send the data to our backend PHP script and display the output to the user. Here user stays in the same page and status of the validation is shown as message to the user.

captcha-demo3-jq.php , Demo without reloading the page by using JQuery.
captcha-demo3-data-jq.php , Backend PHP Script to receive user entered data & returns the validation output

captcha-image.php

Inside PHP script first we will destroy any previous session and then crate a new session which we will use to store random string. This randomly generated string we will add to our image and ask the visitor to read and enter in the text box provided.

session_start();
if(isset($_SESSION['my_captcha']))
{
unset($_SESSION['my_captcha']); // destroy the session if already there
}

We store the randomly generated string in a session variable and we use the same string to generate the captcha image. The session variable is available in our captcha-demo-data.php page where we match both data in session variable and user entered string.

$string1="abcdefghijklmnopqrstuvwxyz";
$string2="1234567890";
$string=$string1.$string2;
$string= str_shuffle($string);
// change the number to change number of chars
$random_text= substr($string,0,8);

We change the header of the page as we are sending an image ( not an html code )
In the last part of the script we will create the image using GD library support.

$im = @ImageCreate (80, 20)
or die ("Cannot Initialize new GD image stream");
// Assign background color
$background_color = ImageColorAllocate ($im, 204, 204, 204); 
// text color is given
$text_color = ImageColorAllocate ($im, 51, 51, 255);
// Random string  from session added 
ImageString($im,5,5,2,$_SESSION['my_captcha'],$text_color);

ImagePng ($im); // image displayed
imagedestroy($im); // Memory allocation for the image is removed.

captcha-demo1.php

We have a simple web form inside which we will include the PHP file captcha-image.php to display the image.

<html>
<head>
<title>Demo of a  form showing  Captcha image </title>
<script type="text/javascript">
function reload()
{
img = document.getElementById("capt");
img.src="captcha-image.php?rand_number=" + Math.random();
}
</script>

</head>
<body >

<form type=post action=captcha-demo-data.php><input type=text name=t1>
<img src=captcha-image.php id="capt">
<input type=button onClick=reload(); value='Reload image'>
<input type=submit value='submit'>
</form>
</body>
</html>

We have added one button to reload the image by user if required. Now once user submit the form the details will be displayed at captcha-demo-data.php file. This file collects all the form data and using one if condition check if captcha string ( present in the session variable ) is same as user entered string or not.

captcha-demo-data.php

<?Php
session_start();
?>
<!doctype html public "-//w3c//dtd html 3.2//en">

<html>
<head>
<title>demo of displaying form value showing captcha image</title>
</head>

<body >
<?Php
echo "Text as entered by user  : $_GET[t1] <br>";
echo "Captcha shown : $_SESSION[my_captcha] <br>";
if($_GET['t1'] == $_SESSION['my_captcha']){
echo "Captcha validation passed ";
}else {
echo "Captcha validation failed ";
}
unset($_SESSION['my_captcha']);

?>

</body>
</html>

Font size and aligning inside image

We are declaring the height and width here.

$im = @ImageCreate (80, 20) // Width and hieght of the image.

The text we are placing inside this image here

ImageString($im,5,5,2,$_SESSION['my_captcha'],$text_color);

Inside this function we have Int 5 as font size, Int 5 as X position of text inside Image, Int 2 as Y position. By adjusting these values we can align text to center , increase size of font and better position them.

How to add Text String to Image

At the time of random text generation, we have one option to select number of chars we want to use. This can be changed here.

$random_text= substr($string,0,8); // change the number to change number of chars

Based on the number of chars used, font size and image with the text string can be positioned.

Advance Script to generate complex Images

We can rotate each char inside the image by arbitrary angle. This will make difficult for the robots to read the text inside images. We can add noise by adding random lines to the image. This part is added in advance section. We have generated each character of the random string as an image and then rotate the same to an arbitrary angle.

How to rotate Image using GD

After rotation of the character ( as Image ) we copy it to our main Image. This process we repeat for each char present in our string. Then we display the final image.

Captcha generation script in PHP

captcha-image.php

captcha-demo1.php

captcha-demo-data.php

Font size and aligning inside image

Advance Script to generate complex Images

Download source code of captcah generation script