Visacent News

General HTML5/CSS3

Simple Captchas with PHP and GD

Simple Captchas with PHP and GD

By now, we've all encountered captcha images in online forms. Captchas are a necessary evil, and this article will teach you how they're made.

Please note that while there are better, automatic third party solutions for captchas out there such as ReCaptcha, this tutorial aims merely to explain and demonstrate how such technology actually works. We won't be explaining what captchas actually are, as it's assumed to be common knowledge and already covered in greater detail elsewhere.

Drawing captchas

You must have the GD(Graphics Draw) library installed before proceeding. This library enables drawing of graphics and images through built-in PHP functions. To install it, run sudo apt-get install php5-gd or if on non-Ubuntu-based operating systems, follow instructions.

Captchas are usually made up of 3 things shape, distortion, and the text.
We'll follow the steps mentioned below:

  • Display an empty image on the browser.
  • Create a shape.
  • Generate random lines.
  • Generate random dots.
  • Generate random text.

The procedural style used in this article is present only because this is a proof of concept, and to keep the final file as simple as possible. In a real project, you would go OOP.

Display an empty image

The image will be treated by HTML as if an external image is being displayed using the img tag. Two functions are used one for creating the image and another for displaying.



    
    

    

TYPE THE TEXT YOU SEE IN THE IMAGE

This is just to check if you are a robot //div1 ends
                          //div2 ends

    
    

The first line indicates the start of the users session on our page.

The display() function has nothing other than a normal HTML code that displays an image in the browser. Other than that, only styling is done for the output to look presentable.

Inside the create_image() function, a variable is used to refer the image returned by theimagecreatetruecolor() function which takes the width and length of the image as its arguments.imagepng() creates a png image of the specified name and path (in the same directory).

A black image will be the output after our first step.

scrn1

Note that the function imagepng() will be the last line of our function and all the following steps are to be inserted in the create_image() function before this function call only, else they would not take effect.

Create a shape

Any shape can be chosen for the captcha. We'll choose a rectangle by using the functionimagefilledrectangle(). It takes five arguments image reference, starting x-pos, starting y-pos, ending x-pos, ending y-pos, and the background color. You may use the corresponding function for an ellipse for generating elliptical captcha.

The imagecolorallocate() function allocates a color to a variable as it takes the RGB combination of the color as arguments. The following code is to be appended in the create()function.

 

Recent News