前言
最近在做的一个功能用到了图形验证码,正好之前也没做过,于是在这里记录一下实现过程。
思路
首先肯定是要创建一副随机图像
生成图像思路:1、在内存中创建一幅图像 2、将随机验证码显示到图像中 3、生成干扰点,防止被其他程序探测 4、将图像输出到页面中。由此,一副带有随机数字的图像就已经生成了。然后我们要做的就是验证码的校验。
验证码页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="yzm-img" id="yzm-img" value="" placeholder="请输入图片验证码" style="margin-right: 115px;" />
<span class="yzm yzm-img">
<a href="javascript:void();" onclick="javascript:PwdLoadVerifyPic();"><img src="" width="100" height="30" border="0" name="pwd_verify_code" id="pwd_verify_code" />
</a>
</span>
<script>
function PwdLoadVerifyPic() {
var url = "/hr_portal/code/verify";
document.getElementById("pwd_verify_code").src = url;
}
</script>
</body>
</html>
后台功能:
/**
* <校验码>
*
* @param request
* @param response
* @throws IOException
*/
@RequestMapping(value = "/verify")
@ResponseBody
public void verifyCode(HttpServletRequest request,
HttpServletResponse response) throws IOException {
response.setContentType("image/jpeg");
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
HttpSession session = request.getSession();
// 在内存中创建图象
int width = 60, height = 18;
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
// 获取图形上下文
Graphics g = image.getGraphics();
// 设定背景色
g.setColor(new Color(0xffffff));
g.fillRect(0, 0, width, height);
String rand = RandomCodeUtil.getCode();
// 将认证码存入SESSION
session.setAttribute("rand", rand);
// 将认证码显示到图象中
g.setColor(Color.black);
g.setFont(new Font("Times New Roman", Font.BOLD, 16));
String Str = rand.substring(0, 1);
g.drawString(Str, 13 * 0 + 6, 12);
Str = rand.substring(1, 2);
g.drawString(Str, 13 * 1 + 6, 17);
Str = rand.substring(2, 3);
g.drawString(Str, 13 * 2 + 6, 15);
Str = rand.substring(3, 4);
g.drawString(Str, 13 * 3 + 6, 15);
// 随机产生88个干扰点,使图象中的认证码不易被其它程序探测到
Random random = new Random();
for (int i = 0; i < 88; i++) {
Color c6 = new Color(random.nextInt(250), random.nextInt(250),
random.nextInt(200));
g.setColor(c6);
int x = random.nextInt(width);
int y = random.nextInt(height);
g.drawOval(x, y, 0, 0);
}
// 图象生效
g.dispose();
// 输出图象到页面
ServletOutputStream responseOutputStream = response.getOutputStream();
// 输出图象到页面
ImageIO.write(image, "JPEG", responseOutputStream);
// 以下关闭输入流!
responseOutputStream.flush();
responseOutputStream.close();
image = null;
}
检验就比较简单了,拿session中的值和图片验证码的值做对比就行了。