91成人在线播放_欧美一区二区视频在线观看_91精品国产高清久久久久久_国产精品久久亚洲不卡4k岛国


待發(fā)短信
在線客服
產(chǎn)品支持 短信寶客服
合作渠道 渠道合作
服務(wù)咨詢

4001-021-502

工作時間

9:00-21:00

短信寶短信驗證碼開發(fā)教程 – 3.圖形驗證碼篇
2015-06-04編輯人: 短信寶小編

前面的文章已經(jīng)把準(zhǔn)備工作都做好了，我們做了注冊頁面，配置文件，工具文件等基礎(chǔ)功能，接下來就進(jìn)入短信驗證碼開發(fā)的關(guān)鍵階段，來帶領(lǐng)大家完成驗證碼圖片的制作，以及前臺在頁面上的調(diào)用。

驗證碼開發(fā)主要有這么幾個部分：創(chuàng)建一個圖片畫布，生成隨機(jī)的驗證碼，把驗證碼放到畫布上，生成干擾線，最后輸出圖片。下面上代碼：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<?php
class Code{
    //資源
    private $img;
    //畫布寬度
    private $width=100;
    //畫布高度
    private $height=30;
    //背景顏色
    private $bgColor='#ffffff';
    //驗證碼
    private $code;
    //驗證碼的隨機(jī)種子
    private $codeStr='23456789abcdefghjkmnpqrstuvwsyz';
    //驗證碼長度
    private $codeLen=4;
    //驗證碼字體
    private $font;
    //驗證碼字體大小
    private $fontSize=16;
    //驗證碼字體顏色
    private $fontColor='';
 
    public function __construct() {
    }
 
    //創(chuàng)建驗證碼
    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;
    }
 
    //設(shè)置字體文件
    public function font($font)
    {
        $this->font= $font;
        return $this;
    }
 
    //設(shè)置文字大小
    public function fontSize($fontSize)
    {
        $this->fontSize=$fontSize;
        return $this;
    }
 
    //設(shè)置字體顏色
    public function fontColor($fontColor)
    {
        $this->fontColor = $fontColor;
        return $this;
    }
 
    //驗證碼數(shù)量
    public function num($num)
    {
        $this->codeLen=$num;
        return $this;
    }
 
    //設(shè)置寬度
    public function width($width)
    {
        $this->width = $width;
        return $this;
    }
 
    //設(shè)置高度
    public function height($height)
    {
        $this->height = $height;
        return $this;
    }
 
    //設(shè)置背景顏色
    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++) {
            // 設(shè)置畫線寬度
            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");
    }
}

好了，這樣圖形驗證碼類制作好了。接下來我們來做一個調(diào)用文件，用于把圖形驗證碼展示出來。 在sms/tool下創(chuàng)建showCode文件，代碼如下：

?
1
2
3
4
5
<?php
session_start(); // 開啟session會話
require('./Code.php'); // 引入驗證碼類文件
$code = new Code(); // 實例化
$code->make(); // 調(diào)用驗證碼顯示方法來顯示

我們還需要完成最后一個步驟，就是在頁面上面展示圖形驗證碼。 打開在前面準(zhǔn)備工作中創(chuàng)建的注冊文件register.php, 找到驗證碼這里，把代碼改成如下：

?
1
2
3
4
5
6
7
8
<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標(biāo)簽中，src引入了驗證碼圖片的展示類，把圖片直接展示在頁面上。添加onclick屬性的作用是點擊切換圖片。完成后在頁面上展示的效果如下：

圖形驗證碼制作完畢了，但是有一點要注意，在php.ini配置文件中，必須要打開GD庫。

開源插件

最新更新

電商類

CMS類

微信類

文章標(biāo)簽