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.
Demo of Captcha generation script
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

Demo of Captcha validation without reloading page by using JQuery

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 height 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.
Demo of Advance Captcha generation script
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.

Download source code of captcha generation script

Scripts

Subscribe to our YouTube Channel here

HZ_92	18-10-2014
Simple and easy captch code :D Thank you very much!

Moin	05-11-2016
How to set the image in center and how to made a font size.?

siteadmin	19-02-2017
Check the line saying ImageString($im,5,5,2, $_SESSION['my_captcha'],$text_color); Here first 5 is the font size, then 5 is the x position. Based on the number of text you want to display and the font size you can adjust the x position to keep the text string at center. It can be created dynamically but that will make the script complex.

adib	26-03-2018
How to validate this captcha. When user insert wrong input and click submit, error messages will appear but still in the same page

smo1234	04-09-2018
That requires JQuery, we will develop that in Part II of this script.

smo1234	05-09-2018
3rd Demo is added, here JQuery is used so page is not reloaded and validation message is shown to the user. This demo is included in Downloaded Zip file.

	01-09-2021
I was trying to add the captcha in my websites contact us form in But imagecreatetruecolor is not defined what can i do

cva	01-03-2013
thanks a lot

Hamza Ayub	05-11-2014
Good Work

seerin thaj	13-03-2015
It is easy to understand

smo1234	31-10-2018
GD support must be available

Captcha generation script in PHP