待發短信
在線客服
4001-021-502
9:00-21:00
前面的文章已經把準備工作都做好了，我們做了注冊頁面，配置文件，工具文件等基礎功能，接下來就進入短信驗證碼開發的關鍵階段，來帶領大家完成驗證碼圖片的制作，以及前臺在頁面上的調用。
驗證碼開發主要有這么幾個部分：創建一個圖片畫布，生成隨機的驗證碼，把驗證碼放到畫布上，生成干擾線，最后輸出圖片。下面上代碼：
|
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
|
<?phpclass 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文件，代碼如下：
|
1
2
3
4
5
|
<?phpsession_start(); // 開啟session會話require('./Code.php'); // 引入驗證碼類文件$code = new Code(); // 實例化$code->make(); // 調用驗證碼顯示方法來顯示 |
我們還需要完成最后一個步驟，就是在頁面上面展示圖形驗證碼。 打開在前面準備工作中創建的注冊文件register.php, 找到驗證碼這里，把代碼改成如下：
|
1
2
3
4
5
6
7
8
|
<div class="form-input"> <label class="code_label"> 驗 證 碼  <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庫。
最新更新
電商類
CMS類
微信類
