Tools

仿百度经验实现汉字点击验证码

阅读：1588 发布：2017-08-10 作者：lypeng

### 效果如下：
![点击汉字验证码](/uploads/2017/598c1710c816d.jpg "点击汉字验证码")

### 分析
- 先看百度经验的，验证码图片作为大的div背景，正确汉字4个在上面，加上混淆汉字5个，总共九个字组成下面的九宫格~
- 点击九宫格汉字后，输入框中的dd背景依次发生变化，四个字全部点击完后ajax验证

### 主要文件信息
index.php	//首页，HTML，js部分
ajax.php	//ajax验证文件
checkcode.class.php	验证码生成类文件

### 代码实现
#### 验证码图片生成(checkcode.class.php)
```php
<?php
session_start();//启用session，保存正确汉字的数字号
class ValidateCode {
	private $charset = array(
		//定义正确的四个汉字，不能有重复的汉字，例如天天开心
		'你是我的','小程序吧','建站系统','汉字内容','网站建设','四个文字','商城开发','无私奉献','大头鬼屋','你们好啊','测试文字'
	);
	private $hxcharset = '響雯瘋勝開間薩箜恐衡碼麼'; //混淆字符，保证不能与上面的重复就行，这里我用繁体
	private $code;//验证码
	private $width = 145;//宽度
	private $height = 180;//高度
	private $img;//图形资源句柄
	private $font;//字体
	private $fontsize = 20;//指定字体大小
	private $fontcolor;//指定字体颜色
	private $qbnew;//九宫格中的文字
	//构造方法初始化
	public function __construct() {
		$this->font=dirname(__FILE__).'/font/simhei.ttf';//注意字体路径要写对，否则显示不了图片
	}
	//生成白色背景,尺寸：145px*180px
	private function createBg() {
		$this->img = imagecreatetruecolor($this->width, $this->height);
		//$color = imagecolorallocate($this->img, mt_rand(157,255), mt_rand(157,255), mt_rand(157,255));
		$color = imagecolorallocate($this->img, 255,255,255);
		imagefilledrectangle($this->img,0,$this->height,$this->width,0,$color);
	}
	//生成正确的四个汉字，与九宫格的九个汉字
	private function createCode() {
		$len=count($this->charset);
		$this->code=$this->charset[rand(1,$len)-1];//四个汉字，来自定义的字符数组
		preg_match_all('/[\x{4e00}-\x{9fa5}]/u', $this->hxcharset, $hxzf);//四个正确汉字拆分成数组，用于下面的合并
		preg_match_all('/[\x{4e00}-\x{9fa5}]/u', $this->code, $hxzft);//混淆字符拆分成数组
		// var_dump($hxzf);
		// var_dump($hxzft);
		$hxzfnew=array_slice($hxzf['0'],1,5);//取出五个混淆汉字
		// var_dump($hxzfnew);
		// var_dump($hxzft['0']);
		$this->qbnew=array_merge($hxzft['0'],$hxzfnew);//四个正确的，加五个混淆的
		sort($this->qbnew);//对这九个汉字随机排序

// $hxzft['0']
		//  0=>建 1=》站 2=》系 3=》统
		// $this->qbnew
		// 0=》反   1=》建   2=》的   3=》统   4=》站   5=》地   6=》系   7=》看   8=》了

//获得正确的验证码对应的四个数字，例如上面的应该得到：1463

$newarr=array_flip($this->qbnew);
		$str='';
		foreach ($hxzft['0'] as $key => $value) {
			$str.=$newarr[$value];
		}
		// $_SESSION['seccode'] = $this->code;
		// $_SESSION['jiucode'] = $this->qbnew;
		$_SESSION['newcode'] = $str;//将数字保存到session
	}
	//将汉字写到图片上，注意坐标，倾斜度等
	private function createFont() {
		preg_match_all('/[\x{4e00}-\x{9fa5}]/u', $this->code, $chinese);
		$_x = 100 / 4;
		for ($i=0;$i<4;$i++) {
			$this->fontcolor = imagecolorallocate($this->img,mt_rand(0,156),mt_rand(0,156),mt_rand(0,156));
			imagettftext($this->img,$this->fontsize,mt_rand(-10,10),$_x*$i,25,$this->fontcolor,$this->font,$chinese['0'][$i]);
		}
		for ($j=0;$j<9;$j++) {
			$this->fontcolor = imagecolorallocate($this->img,mt_rand(0,156),mt_rand(0,156),mt_rand(0,156));
			imagettftext($this->img,$this->fontsize,mt_rand(-10,10),50*($j%3)+10,floor($j/3)*50+70,$this->fontcolor,$this->font,$this->qbnew[$j]);
		}  
	}
	//图片上添加一些线条、雪花
	private function createLine() {
		//线条
		for ($i=0;$i<5;$i++) {
			$color = imagecolorallocate($this->img,mt_rand(0,156),mt_rand(0,156),mt_rand(0,156));
			imageline($this->img,mt_rand(0,100),mt_rand(0,30),mt_rand(0,100),mt_rand(0,30),$color);
		}
		//雪花
		for ($i=0;$i<100;$i++) {
			$color = imagecolorallocate($this->img,mt_rand(200,255),mt_rand(200,255),mt_rand(200,255));
			imagestring($this->img,mt_rand(1,5),mt_rand(0,$this->width),mt_rand(0,$this->height),'*',$color);
		}
	} 
	//输出图片
	private function outPut() {
		header('Content-type:image/jpg');
		imagepng($this->img);
		imagedestroy($this->img);
	}
	//对外生成
	public function doimg() {
		$this->createBg();
		$this->createCode();
		$this->createLine();
		$this->createFont();
		$this->outPut();
	}
}
$_vc = new ValidateCode();  //实例化一个对象
$_vc->doimg();//输出图片
?>
```

#### html部分(index.php)
具体代码见实际效果
重点：
- 每个九宫格对应一个data从0-8
- 页面包含一个隐藏域nvalue
- 每点击一次，js变量i++，i==3时，修改nvalue值，提交ajax验证

#### ajax验证部分
这部分就比较简单了,代码如下：
```php
<?php
session_start();
$nvalue=$_POST['nvalue'];
if($nvalue==$_SESSION['newcode']){
	$data['code']=1;
	$data['msg']='success';
}else{
	$data['code']=0;
	$data['msg']='error';	
}
exit(json_encode($data));
?>
```

------本文结束感谢阅读------

上一篇：chrome报错：Provisional headers are shown no-referrer-when-downgrade

下一篇：vue mint-ui axios php交互等完整的demo