How To Create Captcha Image With PHP?

Posted on Posted in PHP, Software

Let’s create a simple captcha plugin using nothing else just PHP script. First generate a  5 digit random number between 10000 and 99999; call it $randNum.

The random number can be saved into the server’s session for later use, e.g to match the user’s input and the saved value for validation.

The session_start(); must be launched before the usage of the session.

Drawing with PHP

Before starting to draw with PHP, the base needs to be created with the specified sizes.

This will create a black image with the width of 57 pixels and height 27 pixels. Having black background with black numbers will make it impossible to read the captcha’s value. Therefore colors are allocated to them.

The colors are composed with the RGB color model. For the text I picked a middle gray (R 100, G 100, B 100) color and the background is a bright grey (R 240, G240 B240), nearly white.

Once the colors are defined, they can be added to the image. Starting with the background, the PHP function will “flood fill” the image instance with the given starting coordinates (top, left).

Now we have an image with a bright gray background. The following line will draw the captcha string (random number).

The $imgInst must be the return value of imagecreatetruecolor() which was created earlier. The font size is 5, the maximum of the built-in fonts in ‘latin2’ encoding. X and Y coordinates are 6, their starting point is the upper left corner. The Y-coordinate is inverted, therefore its positive value is pointing downwards and visa versa. The $randNum is the previously generated random number, the string which is written using the defined color of $txtColor.

The captcha image instance is created but it’s too easy to read. Let’s draw some diagonal lines over the existing picture with the same text color.

In total there are 16 diagonal lines are drawn over the image. X1 and Y1 are the starting coordinates and X2 and Y2 are the end points of the line.

Output The Image Instance

The captcha’s image instance is now ready to be displayed.There are two ways to do it.

1. Turn PHP script into a PNG image file

The PHP script file can be used as an image source pasted in just like a JPEG or a PNG file. Doing it, the HTTP header needs to be declared.

It is important to turn of the caching otherwise it is likely that the browser saves the image and will display the same after every reload. The content type must be specified as well.

The final step using this method is to output the image to the browser the destroy the instance.

So how to display the image? Just simply use the PHP file as the image source.

2. Output as Base64 source

Sometimes the first method is not functional due to the server’s security or its settings. To get around it, the output of the image instance is put into the buffer,  the content of the buffer is encoded into Base64 and added to a variable.

Start with turning on the output buffering.

Add the instance to the buffer.

Read out the content of the buffer, encode its content to Base64 and add to a variable.

Destroy the image instance and clean up the buffer.

The $b64Img variable contains the Base64 encoded raw image. This can be displayed with the following methodes.

…or…

Leave a Reply

Your email address will not be published. Required fields are marked *