短信宝短信验证码开发教程 - 3.图形验证码篇
发表日期：2015-06-04 文章编辑：小编 浏览次数:
前面的文章已经把准备工作都做好了，我们做了注册页面，配置文件，工具文件等基础功能，接下来就进入短信验证码开发的关键阶段，来带领大家完成验证码图片的制作，以及前台在页面上的调用。
验证码开发主要有这么几个部分：创建一个图片画布，生成随机的验证码，把验证码放到画布上，生成干扰线，最后输出图片。下面上代码：
|
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库。
