• 案例下载

前面的文章已经把准备工作都做好了，我们做了注册页面，配置文件，工具文件等基础功能，接下来就进入短信验证码开发的关键阶段，来带领大家完成验证码图片的制作，以及前台在页面上的调用。

验证码开发主要有这么几个部分：创建一个图片画布，生成随机的验证码，把验证码放到画布上，生成干扰线，最后输出图片。下面上代码：

<?php
class Code{
        //资源
        private $img;
        //画布宽度
        private $width=100;
        //画布高度
        private $height=30;
        //背景颜色
        private $bgColor='#ffffff';
        //验证码
        private $code;
        //验证码的随机种子
        private $codeStr='23456789abcdefghjkmnpqrstuvwsyz';
        //验证码长度
        private $codeLen=4;
        //验证码字体
        private $font;
        //验证码字体大小
        private $fontSize=16;
        //验证码字体颜色
        private $fontColor='';

        public function __construct() {
        }

        //创建验证码
        public function make()
        {
                if(empty($this->font))
                {
                        $this->font = __DIR__ . '/../font/consola.ttf';
                }
                $this->create();//生成验证码
                header("Content-type:image/png");
                imagepng($this->img);
                imagedestroy($this->img);
                exit;
        }

        //设置字体文件
        public function font($font)
        {
                $this->font= $font;
                return $this;
        }

        //设置文字大小
        public function fontSize($fontSize)
        {
                $this->fontSize=$fontSize;
                return $this;
        }

        //设置字体颜色
        public function fontColor($fontColor)
        {
                $this->fontColor = $fontColor;
                return $this;
        }

        //验证码数量
        public function num($num)
        {
                $this->codeLen=$num;
                return $this;
        }

        //设置宽度
        public function width($width)
        {
                $this->width = $width;
                return $this;
        }

        //设置高度
        public function height($height)
        {
                $this->height = $height;
                return $this;
        }

        //设置背景颜色
        public function background($color)
        {
                $this->bgColor = $color;
                return $this;
        }

        //返回验证码
        public function get() {
                return $_SESSION['code'];
        }

        //生成验证码
        private function createCode() {
                $code = '';
                for ($i = 0; $i < $this->codeLen; $i++) {
                        $code .= $this->codeStr [mt_rand(0, strlen($this->codeStr) - 1)];
                }
                $this->code = strtoupper($code);
                $_SESSION['code'] = $this->code;
        }

        //建画布
        private function create() {
                if (!$this->checkGD())
                        return false;
                $w = $this->width;
                $h = $this->height;
                $bgColor = $this->bgColor;
                $img = imagecreatetruecolor($w, $h);
                $bgColor = imagecolorallocate($img, hexdec(substr($bgColor, 1, 2)), hexdec(substr($bgColor, 3, 2)), hexdec(substr($bgColor, 5, 2)));
                imagefill($img, 0, 0, $bgColor);
                $this->img = $img;
                $this->createLine();
                $this->createFont();
                $this->createPix();
                $this->createRec();
        }

        //画线
        private function createLine(){
                $w = $this->width;
                $h = $this->height;
                $line_color = "#dcdcdc";
                $color = imagecolorallocate($this->img, hexdec(substr($line_color, 1, 2)), hexdec(substr($line_color, 3, 2)), hexdec(substr($line_color, 5, 2)));
                $l = $h/5;
                for($i=1;$i<$l;$i++){
                        $step =$i*5;
                        imageline($this->img, 0, $step, $w,$step, $color);
                }
                $l= $w/10;
                for($i=1;$i<$l;$i++){
                        $step =$i*10;
                        imageline($this->img, $step, 0, $step,$h, $color);
                }
        }

        //画矩形边框
        private function createRec() {
                //imagerectangle($this->img, 0, 0, $this->width - 1, $this->height - 1, $this->fontColor);
        }

        //写入验证码文字
        private function createFont() {
                $this->createCode();
                $color = $this->fontColor;
                if (!empty($color)) {
                        $fontColor = imagecolorallocate($this->img, hexdec(substr($color, 1, 2)), hexdec(substr($color, 3, 2)), hexdec(substr($color, 5, 2)));
                }
                $x = ($this->width - 10) / $this->codeLen;
                for ($i = 0; $i < $this->codeLen; $i++) {
                        if (empty($color)) {
                                $fontColor = imagecolorallocate($this->img, mt_rand(50, 155), mt_rand(50, 155), mt_rand(50, 155));
                        }
                        imagettftext($this->img, $this->fontSize, mt_rand(- 30, 30), $x * $i + mt_rand(6, 10), mt_rand($this->height / 1.3, $this->height - 5), $fontColor, $this->font, $this->code [$i]);
                }
                $this->fontColor = $fontColor;
        }

        //画线
        private function createPix() {
                $pix_color = $this->fontColor;
                for ($i = 0; $i < 50; $i++) {
                        imagesetpixel($this->img, mt_rand(0, $this->width), mt_rand(0, $this->height), $pix_color);
                }

                for ($i = 0; $i < 2; $i++) {
                        imageline($this->img, mt_rand(0, $this->width), mt_rand(0, $this->height), mt_rand(0, $this->width), mt_rand(0, $this->height), $pix_color);
                }
                //画圆弧
                for ($i = 0; $i < 1; $i++) {
                        // 设置画线宽度
                        imagearc($this->img, mt_rand(0, $this->width), mt_rand(0, $this->height), mt_rand(0, $this->width), mt_rand(0, $this->height)
                                , mt_rand(0, 160), mt_rand(0, 200), $pix_color);
                }
                imagesetthickness($this->img, 1);
        }

        //验证GD库
        private function checkGD() {
                return extension_loaded('gd') && function_exists("imagepng");
        }
}

好了，这样图形验证码类制作好了。接下来我们来做一个调用文件，用于把图形验证码展示出来。 在sms/tool下创建showCode文件，代码如下：

<?php
session_start(); // 开启session会话
require('./Code.php'); // 引入验证码类文件
$code = new Code(); // 实例化
$code->make(); // 调用验证码显示方法来显示

我们还需要完成最后一个步骤，就是在页面上面展示图形验证码。 

打开在前面准备工作中创建的注册文件register.php, 找到验证码这里，把代码改成如下：

<div class="form-input">
        <label class="code_label">
            验&ensp;证&ensp;码&emsp;
            <input id="vcode" type="text" name="vcode" value=""/>
            <img id="code_img" src="./tool/show_code.php" onclick="this.src='./tool/show_code.php?'+Math.random()" />
            <p id="code_err" class="errmsg" style="margin:5px 0 0 88px; color:red;"></p>
        </label>
</div>

以上代码我做一下解释：在img标签中，src引入了验证码图片的展示类，把图片直接展示在页面上。添加onclick属性的作用是点击切换图片。完成后在页面上展示的效果如下：

图形验证码制作完毕了，但是有一点要注意，在php.ini配置文件中，必须要打开GD库。