Almost all website login pages will have a verification code. The verification code is a security protection mechanism and is required when registering. Manual verification is used to prevent junk registration machines from registering a large number of user accounts to occupy server memory and paralyze the server.
The implementation of image verification code is very simple. First, randomly select a fixed number of characters from the specified character set, draw them on the canvas in an irregular way, then add some interference points and interference elements appropriately, and finally output the picture, and a brand new verification code is completed.
Let me show you the generated verification code first:
Click to refresh:
If you are very satisfied with the effect, please continue reading below.
The front-end code is as follows:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>This is a test!</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <form name="form"> <input type="text" placeholder="账号"/><br/> <input type="password" placeholder="密码"/><br/> <input type="text" placeholder="验证码"/> <img id="verImg" src="libs/verification.php"/> <a href="#" class="change" onclick="changeVer()">点击刷新</a><br/> <input type="submit" value="登录"/> </form> <script type="text/javascript"> //刷新验证码 function changeVer(){ document.getElementById("verImg").src="libs/verification.php?tmp="+Math.random(); } </script> </body> </html>
The code for the php script file verification code is as follows:
<?php session_start(); //开启session记录验证码数据 vCode(4, 15);//设置验证码的字符个数和图片基础宽度 //vCode 字符数目,字体大小,图片宽度、高度 function vCode($num = 4, $size = 20, $width = 0, $height = 0) { !$width && $width = $num * $size * 4 / 5 + 15; !$height && $height = $size + 10; //设置验证码字符集合 $str = "23456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVW"; //保存获取的验证码 $code = ''; //随机选取字符 for ($i = 0; $i < $num; $i++) { $code .= $str[mt_rand(0, strlen($str)-1)]; } //创建验证码画布 $im = imagecreatetruecolor($width, $height); //背景色 $back_color = imagecolorallocate($im, mt_rand(0,100),mt_rand(0,100), mt_rand(0,100)); //文本色 $text_color = imagecolorallocate($im, mt_rand(100, 255), mt_rand(100, 255), mt_rand(100, 255)); imagefilledrectangle($im, 0, 0, $width, $height, $back_color); // 画干扰线 for($i = 0;$i < 5;$i++) { $font_color = imagecolorallocate($im, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255)); imagearc($im, mt_rand(- $width, $width), mt_rand(- $height, $height), mt_rand(30, $width * 2), mt_rand(20, $height * 2), mt_rand(0, 360), mt_rand(0, 360), $font_color); } // 画干扰点 for($i = 0;$i < 50;$i++) { $font_color = imagecolorallocate($im, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255)); imagesetpixel($im, mt_rand(0, $width), mt_rand(0, $height), $font_color); } //随机旋转角度数组 $array=array(5,4,3,2,1,0,-1,-2,-3,-4,-5); // 输出验证码 // imagefttext(image, size, angle, x, y, color, fontfile, text) @imagefttext($im, $size , array_rand($array), 12, $size + 6, $text_color, 'c:\WINDOWS\Fonts\simsun.ttc', $code); $_SESSION["VerifyCode"]=$code; //no-cache在每次请求时都会访问服务器 //max-age在请求1s后再次请求会再次访问服务器,must-revalidate则第一发送请求会访问服务器,之后不会再访问服务器 // header("Cache-Control: max-age=1, s-maxage=1, no-cache, must-revalidate"); header("Cache-Control: no-cache"); header("Content-type: image/png;charset=gb2312"); //将图片转化为png格式 imagepng($im); imagedestroy($im); } ?>
Okay, that’s all about the PHP image drawing verification that the editor introduced to you. I hope it will be helpful to you!