PHP图片验证码的实现-包括前后台页面

原创 2012年03月21日 10:44:14

        以前输出验证码的时候用过一个方法,在前台用JS生成验证码字符串,再传递到后台用PHP输出验证码图像。这样在验证时就不需要使用$_SESSION传递验证码的值,直接用JS比较生成的字符串和输入的字符串是否相等即可。

        但是这种方法的缺点是结构化编程比较明显,并且感觉脱节比较严重。在网上找了一些生成验证码的方法,也都不太完整,有些只包括生成图像并没有包括完整的验证部分,因此在此给出完整的验证码生成类和验证过程。


index.php

其中<img src="ValidationCode.class.php" id="checkImg">用于输出验证码图像。checkImg.onclick=function() { checkImg.src="ValidationCode.class.php?num="+Math.random();  } 用于在单击时重新加载图像。

<?php 
	session_start();                                   //用于在$_SESSION中获取验证码的值
?>
<script type="text/javascript">
	window.onload=function() {
		var xmlHttp = false;
		if (window.XMLHttpRequest) { 					//Mozilla、Safari等浏览器
			xmlHttp = new XMLHttpRequest();
		} 
		else if (window.ActiveXObject) {				//IE浏览器
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			   } catch (e) {}
			}
		}
		var checkImg=document.getElementById("checkImg");
		var checkCode=document.getElementById("checkCode");
		checkImg.onclick=function() {
			checkImg.src="ValidationCode.class.php?num="+Math.random();  //以下用于单击验证码时重新加载验证码图片
			//需要加num=Math.random()以防止图片在本地缓存,单击图片时不刷新显示
		}
		checkCode.onblur=function(){
			//alert("Hello");
			xmlHttp.open("POST","checkCode.php",true);
			xmlHttp.onreadystatechange=function () {
				if(xmlHttp.readyState==4 && xmlHttp.status==200) {
					var msg=xmlHttp.responseText;    //设置标志用于表示验证码是否正确
					if(msg=='1')
						document.getElementById("checkResult").innerHTML="正确";  //在这可以设置其中间显示一张图片
					else
						document.getElementById("checkResult").innerHTML="错误";
				}
			}
			xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlHttp.send("validateCode="+checkCode.value);
		}	
	}
</script>
<input type="text" id="checkCode">
<img src="ValidationCode.class.php" id="checkImg"><span id="checkResult">请在此输入验证码</span>

ValidationCode.class.php

验证码的生成类,要使用$_SESSION['checkCode']将验证码的值存入$_SESSION中。

<?php
session_start();               //为了将验证码的值保留在$_SESSION中
class ValidationCode {
	private $width;
	private $height;
	private $codeNum;           //验证码的个数
	private $image;             //图像资源
	private $checkCode;         //验证码字符串

	function __construct($width=60,$height=20,$codeNum=4) {
		$this->width=$width;
		$this->height=$height;
		$this->codeNum=$codeNum;
		$this->checkCode=$this->createCheckCode();
	}
	//通过调用该方法向浏览器输出验证码图像
	function showImage() {
		$this->createImage();      //第一步:创建背景图像
		$this->setDisturbColor();  //第二步:设置干扰元素,此处只加了干扰直线
		$this->outputText();       //第三步:输出验证码
		$this->outputImage();      //第四步:输出图像
	}
	//通过调用该方法获取随机创建的验证码字符串
	function getCheckCode(){
		return $this->checkCode;
	}
	//创建背景图像
	private function createImage(){
		$this->image=imagecreatetruecolor($this->width, $this->height);
		//随机背景色
		$backColor=imagecolorallocate($this->image, rand(225,255), rand(225,255), rand(225,255));
		//为背景填充颜色
		imagefill($this->image, 0, 0, $backColor);
		//设置边框颜色
		$border=imagecolorallocate($this->image, 0, 0, 0);
		//画出矩形边框
		imagerectangle($this->image, 0, 0, $this->width-1, $this->height-1, $border);	
	}
	//输出干扰元素
	private function setDisturbColor() {
		$lineNum=rand(2,4);               //设置干扰线数量
		for($i=0;$i<$lineNum;$i++) {
			$x1=rand(0,$this->width/2);
			$y1=rand(0,$this->height/2);
			$x2=rand($this->width/2,$this->width);
			$y2=rand($this->height/2,$this->height);
			$color=imagecolorallocate($this->image, rand(100,200), rand(100,200), rand(100,200));   //颜色设置比背景深,比文字浅
			imageline($this->image, $x1, $y1, $x2, $y2, $color);
		}
	}
	//生成验证码字符串
	private function createCheckCode() {    //或者这里可以通过前台传递过来的参数生成字符
		$code="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
		$string="";
		for($i=0;$i<$this->codeNum;$i++) {
			$char=$code{rand(0,strlen($code)-1)};
			$string.=$char;
		}
		return $string;
	}
	//输出验证码
	private function outputText() {
		//echo "<script type='text/javascript'>alert('".$this->checkCode."')</script>";
		$string=$this->checkCode;
		for($i=0;$i<$this->codeNum;$i++) {
			$x=rand(1,4)+$this->width*$i/$this->codeNum;
			$y=rand(1,$this->height/4);
			$color=imagecolorallocate($this->image, rand(0,128), rand(0,128), rand(0,128));
			$fontSize=rand(4,5);
			imagestring($this->image, $fontSize, $x, $y, $string[$i], $color);
		}	
	}
	//输出图像
	private function outputImage() {
		if(imagetypes() & IMG_GIF) {
			header("Content-type:image/gif");
			imagepng($this->image);
		}else if(imagetypes() & IMG_JPG) {
			header("Content-type:image/jpeg");
			imagepng($this->image);
		}else if(imagetypes() & IMG_PNG) {
			header("Content-type:image/png");
			imagepng($this->image);
		}else if(imagetypes() & IMG_WBMP) {
			header("Content-type:image/vnd.wap.wbmp");
			imagepng($this->image);
		}else {
			die("PHP不支持图像创建");
		}
	}
	function __destruct() {
		imagedestroy($this->image);
	}
}
$code=new ValidationCode(60, 20, 4);
$_SESSION['checkCode']=$code->getCheckCode();     //将验证码的值存入session中以便在页面中调用验证
$code->showImage();   //输出验证码
?>

checkCode.php

和index.php结合以验证输入的正确性,并用Ajax改变前端显示

<?php
	session_start();
	//注意如此此处存在中文验证码时,用Ajax传值要注意存在中文乱码的问题
	$validateCode=$_POST['validateCode'];
	if(strtoupper($validateCode)==strtoupper($_SESSION['checkCode']))          //判断文本框中输入的值和$_SESSION中保存的验证码值是否相等
		echo "1";         
	else 
		echo "0";
?>

以下为运行结果:



Php图片验证码显示不出来的解决过程

问题 今天在在本地新建了一个虚拟主机,把以前写好的一个php小网站部署上去,因为以前用的wamp集成环境,所以没有出现这种情况。现在突然发现验证码竟然刷不出来了。 于是便开启了找bug之旅,在网上...
  • yeweiyang16
  • yeweiyang16
  • 2017年04月30日 10:36
  • 5055

如何解决php 生成验证码图片不显示问题

最近遇到一个问题,就是验证码在别人的电脑上可以显示,但是我自己的电脑上去不能。原因找了好久,哈哈,终于找到了!现在给大家分享一下: 程序:     $w = 80; //设置图片宽和高 $h = 2...
  • whq19890827
  • whq19890827
  • 2014年12月07日 09:14
  • 5963

php封装生成验证码VerifyImage类

如今,在先用户权限登录模块的时候,我们会经常使用到验证码。因此我最近就封装了一个基于GD图形库的验证码生成类,方便日后的使用。生成验证码的步骤大概就是: 一)产生一个随机的字符串; 二)创建一个图像...
  • ACMore_Xiong
  • ACMore_Xiong
  • 2016年01月19日 13:56
  • 4530

PHP图片验证码的实现-包括前后台页面

以前输出验证码的时候用过一个方法,在前台用JS生成验证码字符串,再传递到后台用PHP输出验证码图像。这样在验证时就不需要使用$_SESSION传递验证码的值,直接用JS比较生成的字符串和输入的字符串是...
  • QQ635785620
  • QQ635785620
  • 2012年11月04日 16:47
  • 9048

Struts2 实现验证码前后台同步

验证码生成类 public class ValidateCode { private static ValidateCode validateCode = null; private Stri...
  • u010833215
  • u010833215
  • 2017年04月16日 11:54
  • 179

图片管理的前后台 静态页面 模板

  • 2017年12月08日 14:04
  • 6.32MB
  • 下载

Web---图片验证码生成教程详解-从简单到复杂-从本地到前后台

首先,我们先来看本地如何生成图片验证码的,再来写输出到网页的验证码如何实现。先来看最简单的—实现的功能是,将一个字符串变成图片写入到文件中实现代码:package cn.hncu.img;import...
  • qq_26525215
  • qq_26525215
  • 2016年07月18日 00:13
  • 6783

java实现自动登录无验证码登录后台并保持会话状态持续监控固定页面信息。

BTW:代码都是网上找来自己修改的,仅用于自己做记录,请轻喷~谢谢 先说些废话,终于有了一份工作,是做运维,虽然和自己以前当程序员的目标有点距离,但是既然做一个工作就要把它做好,运维也不好做啊。公司分...
  • wjllovewxx
  • wjllovewxx
  • 2016年03月05日 18:03
  • 1368

后台登录(包含验证码)的php代码实现

login.html文件 login in 用户名: 密码: 验证码:      code.php文件 session_start();// // Set the...
  • whq19890827
  • whq19890827
  • 2014年10月17日 14:53
  • 2028

标准的登陆注册页面后台代码(含验证码)

  • 2017年05月09日 09:37
  • 5KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:PHP图片验证码的实现-包括前后台页面
举报原因:
原因补充:

(最多只允许输入30个字)