Java Web app图片验证及刷新验证码_笔记
在网站新用户注册和提交新博文等操作经常需要用到验证技术，图片验证即其中的一种，他的优点在于防止骇客利用程序恶意重复提交消息，造成大量网站垃圾数据的积累，一般程序很难将图片上的字符识别出来，所以采用图片作为验证码是一种很好的选择。
下面是本人在平时学习中采用js和servlet实现的图片验证码产生和刷新，整个流程有点类似ajax局部刷新。
1、产生验证码图片的servlet：
写道
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class ImageAction extends Action{
/**
* 执行登陆的业务处理
* @param request:发送上来的请求
* @return destJsp：目标URL
*/
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
//设置页面不缓存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
//在内存中创建图象
int width = 60, height = 20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//获取图形上下文
Graphics g = image.getGraphics();
//生成随机类
Random random = new Random();
//设定背景色
g.setColor(getRandColor(220, 250));
g.fillRect(0, 0, width, height);
//设定字体
g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
//画边框
//g.drawRect(0,0,width-1,height-1);
g.draw3DRect(0,0,width-1,height-1,true);
//随机产生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位数字)
String sRand = "";
String s = "012345678901234567890123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ012345678901234567890123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (int i = 0; i < 4; i++) {
char rand =s.charAt(random.nextInt(s.length()));
sRand += rand;
// 将认证码显示到图象中
g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
g.drawString(String.valueOf(rand), 13 * i + 6, 16);
}
g.drawOval(0,12,60,11);
// 将认证码存入SESSION
request.getSession().setAttribute("rand", sRand);
// 图象生效
g.dispose();
ServletOutputStream output;
try {
output = response.getOutputStream();
// 输出图象到页面
ImageIO.write(image, "JPEG", output);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
/**
* 生成随机颜色
*/
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);
}
}
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class ImageAction extends Action{
/**
* 执行登陆的业务处理
* @param request:发送上来的请求
* @return destJsp：目标URL
*/
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
//设置页面不缓存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
//在内存中创建图象
int width = 60, height = 20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//获取图形上下文
Graphics g = image.getGraphics();
//生成随机类
Random random = new Random();
//设定背景色
g.setColor(getRandColor(220, 250));
g.fillRect(0, 0, width, height);
//设定字体
g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
//画边框
//g.drawRect(0,0,width-1,height-1);
g.draw3DRect(0,0,width-1,height-1,true);
//随机产生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位数字)
String sRand = "";
String s = "012345678901234567890123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ012345678901234567890123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (int i = 0; i < 4; i++) {
char rand =s.charAt(random.nextInt(s.length()));
sRand += rand;
// 将认证码显示到图象中
g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
g.drawString(String.valueOf(rand), 13 * i + 6, 16);
}
g.drawOval(0,12,60,11);
// 将认证码存入SESSION
request.getSession().setAttribute("rand", sRand);
// 图象生效
g.dispose();
ServletOutputStream output;
try {
output = response.getOutputStream();
// 输出图象到页面
ImageIO.write(image, "JPEG", output);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
/**
* 生成随机颜色
*/
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);
}
}
2、页面内容：
写道
//更换验证码图片
function getImage()
{
var preImage = document.getElementById("displayImage");
preImage.innerHTML = "";
var imageZone = document.createElement('img');
imageZone.setAttribute('id','imageZone');
//提取服务器上的图片显示下来:
imageZone.setAttribute('src',"imageAction.do");
preImage.appendChild(imageZone);
}
</script>
</head>
<body>
.........
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="16%" height="35" valign="middle" class="list">验证码：</td>
<td width="12%" valign="middle"><input name="confirCode" type="text" class="form_input" id="randCode" size="9" maxlength="4"><font color="#FF0000">*</font>
</td>
<td width="12%">
<div id="displayImage">
<img id="random" border=1 src="imageAction.do">
</div>
</td>
<td align="left">
<input type="button" value="看不清，换一张。" onclick="getImage();" /></td>
<!-- <td width="66%" height="35" valign="middle" class="list"><img name="CheckNumber" border=0 src="/BlogDemo/images/7250.gif" width="60" height="20" alt=""></td> -->
</tr>
</table>
function getImage()
{
var preImage = document.getElementById("displayImage");
preImage.innerHTML = "";
var imageZone = document.createElement('img');
imageZone.setAttribute('id','imageZone');
//提取服务器上的图片显示下来:
imageZone.setAttribute('src',"imageAction.do");
preImage.appendChild(imageZone);
}
</script>
</head>
<body>
.........
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="16%" height="35" valign="middle" class="list">验证码：</td>
<td width="12%" valign="middle"><input name="confirCode" type="text" class="form_input" id="randCode" size="9" maxlength="4"><font color="#FF0000">*</font>
</td>
<td width="12%">
<div id="displayImage">
<img id="random" border=1 src="imageAction.do">
</div>
</td>
<td align="left">
<input type="button" value="看不清，换一张。" onclick="getImage();" /></td>
<!-- <td width="66%" height="35" valign="middle" class="list"><img name="CheckNumber" border=0 src="/BlogDemo/images/7250.gif" width="60" height="20" alt=""></td> -->
</tr>
</table>
声明：本篇文章源自蓝杰培训课程。