Learn how to create a sign-up form for a website with a security image. The image prevents fake sign-ups and spam. In this tutorial, we will learn how to create a security image template, then put it to use.
Next, we set other text variables. To do so, we first create a random font size between 12 and 16 points. Then, we create a random angle. Even though angles should only be positive values, the GD Library is smart enough to correct it (-5° to 355° for example). A random dark color to be used with the image is then created.
//Create random size, angle, and dark color $size = rand(12, 16); $angle = rand(-5, 5); $color = ImageColorAllocate($im, rand(0, 100), rand(0, 100), rand(0, 100));
We will be preparing the text position next. To do this, we will use imagettfbbox to return the dimensions of the true type text box using the already defined size, angle, font, and textstr variables. After that, we determine the absolute difference between 1- lower right corner x position and the lower left corner x position (the width), and 2- the upper right corner y position and the lower right corner y position (height). If you're scratching your head, consider the following diagram:
Then, using the imagesx (width) & imagesy (height) properties of the image we created earlier, we generate an x and a y position. Note that we add a random number between -20 and 20 to the x position, so that it is a little to the left or right of center.
//Determine text size, and use dimensions to generate x & y coordinates $textsize = imagettfbbox($size, $angle, $font, $textstr); $twidth = abs($textsize-$textsize); $theight = abs($textsize-$textsize); $x = (imagesx($im)/2)-($twidth/2)+(rand(-20, 20)); $y = (imagesy($im))-($theight/2);
We're finally ready to add the text to the image using all of the variables we have just created. Now, let's go over the variables:
$im represents the original image reference $size represents the font size $angle represents the angle the text is to be tilted at $x represents the x coordinate to place the text at $y represents the y coordinate to place the text at $color represents the random color you just created $font represents the reference to the ttf font file $textstr represents the text to be inserted
//Add text to image ImageTTFText($im, $size, $angle, $x, $y, $color, $font, $textstr);
Now that we've prepared our image, we're finally ready to output it. So, we first set the Content-Type header to be a PNG image. Then, we simply write the image content in PNG format using ImagePNG.
Deleting the image is very important, because it frees the server memory. This ensures optimal performance from the server. To do so, we use the imagedelete function, passing our image reference $im to it.
//Destroy the image to free memory imagedestroy($im);
The next step is to enter the random text, $textstr, and the reference ID, $referenceid, into the MySQL database, using the table we created earlier. Be sure you enter your username and password in the connection function. To insert the text, we first connect to the server. Then, we insert the current date and time, reference ID, and the hidden text value. After this, we delete the references older than one day, to prevent them from stacking up and wasting space.
//Insert reference into database, and delete any old ones mysql_connect("localhost", "username", "password") or die(mysql_error()); mysql_select_db("dw_php"); //Create reference mysql_query("INSERT INTO security_images (insertdate, referenceid, hiddentext) VALUES ( now(), '".$referenceid."', '".$textstr."')"); //Delete references older than 1 day mysql_query("DELETE FROM security_images WHERE insertdate < date_sub(now(), interval 1 day)");
Finally, we end the output by using exit and close the PHP block.