General HTML5/CSS3
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.
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:
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.
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.
//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.
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.
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.