前言
图形验证码在我们日常生活中是很常见的，一般用于登录页面来避免简单的网络机器人来不断地请求你的数据。以前总是觉得这个很神奇，总以为是先自己做好一张张的静态图片然后切换即可。当时也存在个疑问，如果是这样，那岂不是会重复？知道后来看到同事写的代码才知道具体的实现过程。
实现过程
做法简述
1、首先定义一个字符串，比如Strng a = "123456789abcABC..."。
2、每次根据步骤一字符串的长度产生一个随机数，然后截取字符串的一个字符。如果你想生成四个，那么重复四次这个操作即可。
3、制作图片高和宽。
4、定义颜色和产生干扰的线条。
5、将验证码（步骤二生成的数字和字母组合）保存在session中，用于对比客户端输入是否正确。
6、给前端 请求返回一个图片。
代码实现过程
核心代码，采用最常见的servlet
package com.read.utils;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.log4j.Logger;
@SuppressWarnings("serial")
public class VerificationCode extends HttpServlet {
private static Logger Log = Logger.getLogger("sysLog");
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 验证码图片的宽度。
int width = 100;
// 验证码图片的高度。
int height = 40;
BufferedImage buffImg = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffImg.createGraphics();
// 创建一个随机数生成器类。
Random random = new Random();
// 设定图像背景色(因为是做背景，所以偏淡)
g.setColor(getRandColor(200, 250));
g.fillRect(0, 0, width, height);
// 创建字体，字体的大小应该根据图片的高度来定。
Font font = new Font("Times New Roman", Font.HANGING_BASELINE, 28); // 设置字体。
g.setFont(font);
// 画边框。
g.setColor(Color.BLACK);
g.drawRect(0, 0, width - 1, height - 1);
// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到。
//g.setColor(Color.GRAY);
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);
}
// randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
StringBuffer randomCode = new StringBuffer();
// 设置默认生成4个验证码
int length = 4;
// 设置备选验证码:包括"a-z"和数字"0-9"
String base = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
int size = base.length();
// 随机产生4位数字的验证码。
for (int i = 0; i < length; i++) {
// 得到随机产生的验证码数字。
int start = random.nextInt(size);
String strRand = base.substring(start, start + 1);
// 用随机产生的颜色将验证码绘制到图像中。
// 生成随机颜色(因为是做前景，所以偏深) //g.setColor(getRandColor(1, 100)); 81
//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
g.drawString(strRand, 15 * i + 6, 24);
// 将产生的四个随机数组合在一起。
randomCode.append(strRand);
}
// 将四位数字的验证码保存到Session中。
HttpSession session = request.getSession();
session.setAttribute("checkCode", randomCode.toString());
//图象生效
g.dispose();
// 禁止图像缓存。
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/jpeg");
// 将图像输出到Servlet输出流中。
ServletOutputStream sos = response.getOutputStream();
ImageIO.write(buffImg, "jpeg", sos);
sos.flush();
sos.close();
}
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);
}
}
在web.xml注册
<!-- 验证码 -->
<servlet>
<servlet-name>verificationCode</servlet-name>
<servlet-class>com.read.utils.VerificationCode</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>verificationCode</servlet-name>
<url-pattern>/common/image</url-pattern>
</servlet-mapping>前端JavaScript调用
function reloadImage() {
var localObj = window.location;
var contextPath = localObj.pathname.split("/")[1];
var basePath = localObj.protocol + "//" + localObj.host + "/" + contextPath;
$("#security-code-pic").attr("src",basePath + "/common/image?rand=" + Math.random());
}html标签
<img alt="加载中。。。" id="security-code-pic" onclick="reloadImage()" class="security-code-pic">注意事项
一般来说，验证码的调用一般要包括以下几种情况：
1、刚进入页面
2、点击验证码处自动刷新
3、不过使用ajax 异步还是表单提交数据，账号密码不匹配的话验证码需要重新获取。
结语
到此图形验证码的制作和调用全部完成了，当然大家可以根据自己的需求修改出更好看的验证码图片。