前面的文章已經把準備工作都做好了,我們做了注冊頁面,配置文件,工具文件等基礎功能,接下來就進入短信驗證碼開發的關鍵階段,來帶領大家完成驗證碼圖片的制作,以及前臺在頁面上的調用。
驗證碼開發主要有這么幾個部分:創建一個圖片畫布,生成隨機的驗證碼,把驗證碼放到畫布上,生成干擾線,最后輸出圖片。下面上代碼:
<?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() {
}
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);
}
private function checkGD() {
return extension_loaded('gd') && function_exists("imagepng");
}
}
好了,這樣圖形驗證碼類制作好了。接下來我們來做一個調用文件,用于把圖形驗證碼展示出來。 在sms/tool下創建showCode文件,代碼如下:
<?php
session_start();
require('./Code.php');
$code = new Code();
$code->make();
我們還需要完成最后一個步驟,就是在頁面上面展示圖形驗證碼。
打開在前面準備工作中創建的注冊文件register.php, 找到驗證碼這里,把代碼改成如下:
<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庫。