众所周知，我们在日常登录网站时都需要进行验证码的验证，其主要的作用是防止一些破坏行为的发生，验证码的设计是一个比较简单的过程，该文章主要是讲述一些比较简单的图片字母数字验证码的设计。由于本人目前也是初学阶段，还是主要以贴代码为主，为今后整理资料打下基础。
普通验证码
RandomNumUtil工具包
该工具包里面主要是提供的方法是获取随机的验证码字母和数字的组合字符长和获取印有该字符串的带有背景色的图片
获取RandomNumUtil实例对象
public static RandomNumUtil Instance() {
return new RandomNumUtil();
}
获取随机验证码字符串
public String getStr() {
return str;
}
获取带有验证码字符串的图片验证码图片
public ByteArrayInputStream getImage() {
return image;
}
RandomNumUtil工具包整体代码
package utils;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.imageio.stream.ImageOutputStream;
public class RandomNumUtil {
public static final char[] CHARS = {'0','1','2', '3', '4', '5', '6', '7', '8',
'9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M',
'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' };
private ByteArrayInputStream image;//图像
private String str;//验证码
//构造函数
private RandomNumUtil(){
init(); //初始化属性
}
/**
* 获得RandomNumUtil实例
*/
public static RandomNumUtil Instance() {
return new RandomNumUtil();
}
/**
* 获得图片验证图片
*/
public ByteArrayInputStream getImage() {
return image;
}
public void setImage(ByteArrayInputStream image) {
this.image = image;
}
/**
* 获得图片验证码
* @return
*/
public String getStr() {
return str;
}
public void setStr(String str) {
this.str = str;
}
/**
* 初始化
*/
private void init() {
//在内存中创建图像
int width=65,height=20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//获取图形上下文
Graphics g = image.getGraphics();
//生产随机类
Random random = new Random();
//设定背景色
g.setColor(getRandColor(200,250));
g.fillRect(0, 0, width, height);
//设定字体
g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(160, 200));
for (int i = 0; i < 155; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}
// 取随机产生的认证码(6位数字)
StringBuffer sRand = new StringBuffer();
for (int i = 0; i < 4; i++) {
String rand = String.valueOf(CHARS[random.nextInt(CHARS.length)]);
sRand.append(rand);
// 将认证码显示到图象中
g.setColor(new Color(20 + random.nextInt(110), 20 + random
.nextInt(110), 20 + random.nextInt(110)));
// 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
g.drawString(rand, 13 * i + 6, 16);
}
// 赋值验证码
this.str = sRand.toString();
// 图象生效
g.dispose();
ByteArrayInputStream input = null;
ByteArrayOutputStream output = new ByteArrayOutputStream();
try {
ImageOutputStream imageOut = ImageIO
.createImageOutputStream(output);
ImageIO.write(image, "JPEG", imageOut);
imageOut.close();
input = new ByteArrayInputStream(output.toByteArray());
} catch (Exception e) {
System.out.println("验证码图片产生出现错误：" + e.toString());
}
this.image = input;/* 赋值图像 */
}
/*
* 给定范围获得随机颜色
*/
private Color getRandColor(int fc, int bc) {
Random random = new Random();
if (fc > 255)
fc = 255;
if (bc > 255)
bc = 255;
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
}
创建servlet文件
package servlet;
import java.io.BufferedInputStream;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import utils.RandomNumUtil;
@WebServlet("/randoms")
public class randoms extends HttpServlet {
private ByteArrayInputStream inputStream;
public ByteArrayInputStream getInputStream() {
return inputStream;
}
public void setInputStream(ByteArrayInputStream inputStream) {
this.inputStream = inputStream;
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
RandomNumUtil rdnu=RandomNumUtil.Instance();
System.out.println(rdnu.getStr()+"========");
request.getSession().setAttribute("random", rdnu.getStr());//获得验证码字符串
BufferedInputStream bis = null;
OutputStream os = null;
bis = new BufferedInputStream(rdnu.getImage());
byte[] buffer = new byte[512];
response.setCharacterEncoding("UTF-8");
response.setContentType("image/*");
response.setContentLength(bis.available());
os = response.getOutputStream();
int n;
while ((n = bis.read(buffer)) != -1) {
os.write(buffer, 0, n);
}
bis.close();
os.flush();
os.close();
}
public void ImageShow(HttpServletRequest request,HttpServletResponse response) throws IOException{
//String img = "D:\\u01\\hrtwork\\upload\\111000\\111000.486001094000604.20140509.1.jpg";
OutputStream os = null;
String img =request.getParameter("upload");
// img="D:/"+img;
BufferedInputStream bis = null;
try{
FileInputStream fileInputStream = new FileInputStream(new File(img));
bis = new BufferedInputStream(fileInputStream);
byte[] buffer = new byte[512];
response.setCharacterEncoding("UTF-8");
response.setContentType("image/*");
response.setContentLength(bis.available());
os = response.getOutputStream();
int n;
while ((n = bis.read(buffer)) != -1) {
os.write(buffer, 0, n);
}
fileInputStream.close();
bis.close();
os.flush();
os.close();
}catch(Exception e){
}
}
}
在servlet文件中有一句
request.getSession().setAttribute("random", rdnu.getStr());//设置验证码字符串
该代码让产生的随机验证码变成了全局变量，在代码执行的过程中将random存放在cookie中在代码不结束的情况下在任何位置都可以用
request.getSession().getAttribute("random");//获得验证码字符串
来获取随机码和自己在文本框里面输入的字符串进行比较。
前端页面的代码
前端图片显示代码
<img src="randoms" onclick="changeValidateCode(this)" alt="看不清楚？点击刷新" title="看不清楚？点击刷新">
<p id="yzpd"></p>
只需要在<img src="">里面的src里面写上servlet文件里面randoms文件的地址就可以拿到图片地址，从而可以在页面上显示出图片。
点击验证码图片可以刷新验证码js代码
function changeValidateCode(obj) {
//获取当前的时间作为参数，读取时就不会读取缓存中的内容
var timenow = new Date().getTime();
//每次请求需要一个不同的参数，否则可能会返回同样的验证码
//这和浏览器的缓存机制有关系，也可以把页面设置为不缓存，这样就不用这个参数了。
obj.src="randoms?d="+timenow;
}
前端ajax代码
function yzm() {
var textyzm=$("#yz").val();
$.ajax({
url:"UserInfoServlet",
type:"post",
dataType:"html",
data:{"type":4,"yzm":textyzm},
success:function(data){
$("#yzpd").html(data);
},
error:function(){
alert("错误！");
}
});
}
页面效果（有待优化）
验证码效果
网友评论