标准 4 位验证码的实现

在上代码之前，我们先看一下验证码的最终效果图：

效果图

话不多说，我们看看是怎样实现的。这个验证码的实现需要建两个PHP文件，一个index.php（展示），另一个vcode.php（验证码加工）。

先看index.php：

<html>
<head>
</head>
<body>
<form>
    验证码：<input type="text" name="vcode">
    <script type="text/javascript">
        //生成一个四位数
        var num1 = Math.round(Math.random()*10000000+10000);
        var num = num1.toString().substr(0,4);
        document.write("<img name='c' src='vcode.php?code="+num+"'>");//验证码作为图片从vcode.php文件返回
        function recode(){//看不清换一张验证码的实现函数
            var num1 = Math.round(Math.random()*10000000+10000);
            var num = num1.toString().substr(0,4);
            document.c.src = "vcode.php?code="+num;
        }
    </script>
    <a href="javascript:recode()" style="text-decoration:none;">看不清？换一张</a>
</form>
</body>
</html>

再看vcode.php：

<?php
header("Content-type:image/png");//用header()函数发送HTTP头信息给浏览器，告诉输出的图片类型为png
$im=imagecreate(60,20);//创建画布
imagefill($im,0,0,imagecolorallocate($im,200,200,200));//imageallocate()用于指定分配颜色，而imagefill()用于设置画布背景颜色
$code=$_GET['code'];//从index.php接收数字
for($i=0;$i<4;$i++){
    $color=imagecolorallocate($im,rand(0,100),rand(0,100),rand(0,100));
    imagestring($im, rand(3,5),60*$i/4+rand(3,6), rand(0,6), $code[$i], $color);//绘制文字
}
for($j=0;$j<200;$j++){
    imagesetpixel($im,rand(0,60),rand(0,20),imagecolorallocate($im,rand(0,255),rand(0,255),rand(0,255)));//绘制200个不规则像素点
}
imagepng($im);//输出图像
imagedestroy($im);//销毁图像资源
?>

运行以下，看效果：

运行效果

不算复杂的4位验证码就是这样实现的。如果真要说有什么需要注意的地方，那么就是验证码实现过程中使得像素点均匀分布时的那一点小算术（如我上面的“60*$i/4+rand(3,6)”，这个可以自己灵活设计）。

猜你喜欢