java实现图形验证码

项目中可能会用到图形验证码的功能，源码分享给大家。以下是实际效果图：

一、后端JAVA代码

1.生成图形验证码工具类

public class imgVerifyCode {

    private int weight = 100;           //验证码图片的长和宽
    private int height = 40;
    private String text;                //用来保存验证码的文本内容
    private Random r = new Random();    //获取随机数对象
    //private String[] fontNames = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"};   //字体数组
    //字体数组
    private String[] fontNames = {"Georgia"};
    //验证码数组
    private String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";

    /**
     * 获取随机的颜色
     *
     * @return
     */
    private Color randomColor() {
        int r = this.r.nextInt(225);  //这里为什么是225，因为当r，g，b都为255时，即为白色，为了好辨认，需要颜色深一点。
        int g = this.r.nextInt(225);
        int b = this.r.nextInt(225);
        return new Color(r, g, b);            //返回一个随机颜色
    }

    /**
     * 获取随机字体
     *
     * @return
     */
    private Font randomFont() {
        int index = r.nextInt(fontNames.length);  //获取随机的字体
        String fontName = fontNames[index];
        int style = r.nextInt(4);         //随机获取字体的样式，0是无样式，1是加粗，2是斜体，3是加粗加斜体
        int size = r.nextInt(10) + 24;    //随机获取字体的大小
        return new Font(fontName, style, size);   //返回一个随机的字体
    }

    /**
     * 获取随机字符
     *
     * @return
     */
    private char randomChar() {
        int index = r.nextInt(codes.length());
        return codes.charAt(index);
    }

    /**
     * 画干扰线，验证码干扰线用来防止计算机解析图片
     *
     * @param image
     */
    private void drawLine(BufferedImage image) {
        int num = r.nextInt(10); //定义干扰线的数量
        Graphics2D g = (Graphics2D) image.getGraphics();
        for (int i = 0; i < num; i++) {
            int x1 = r.nextInt(weight);
            int y1 = r.nextInt(height);
            int x2 = r.nextInt(weight);
            int y2 = r.nextInt(height);
            g.setColor(randomColor());
            g.drawLine(x1, y1, x2, y2);
        }
    }

    /**
     * 创建图片的方法
     *
     * @return
     */
    private BufferedImage createImage() {
        //创建图片缓冲区
        BufferedImage image = new BufferedImage(weight, height, BufferedImage.TYPE_INT_RGB);
        //获取画笔
        Graphics2D g = (Graphics2D) image.getGraphics();
        //设置背景色随机
//        g.setColor(new Color(255, 255, r.nextInt(245) + 10));
        g.setColor(Color.white);
        g.fillRect(0, 0, weight, height);
        //返回一个图片
        return image;
    }

    /**
     * 获取验证码图片的方法
     *
     * @return
     */
    public BufferedImage getImage() {
        BufferedImage image = createImage();
        Graphics2D g = (Graphics2D) image.getGraphics(); //获取画笔
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < 4; i++)             //画四个字符即可
        {
            String s = randomChar() + "";      //随机生成字符，因为只有画字符串的方法，没有画字符的方法，所以需要将字符变成字符串再画
            sb.append(s);                      //添加到StringBuilder里面
            float x = i * 1.0F * weight / 4;   //定义字符的x坐标
            g.setFont(randomFont());           //设置字体，随机
            g.setColor(randomColor());         //设置颜色，随机
            g.drawString(s, x, height - 5);
        }
        this.text = sb.toString();
        drawLine(image);
        return image;
    }

    /**
     * 获取验证码文本的方法
     *
     * @return
     */
    public String getText() {
        return text;
    }

    public static void output(BufferedImage image, OutputStream out) throws IOException                  //将验证码图片写出的方法
    {
        ImageIO.write(image, "JPEG", out);
    }
}

由于项目需求，图形验证码的背景色我改为白色了，可根据自身情况选择图片背景色

        //设置背景色随机
//        g.setColor(new Color(255, 255, r.nextInt(245) + 10));
        g.setColor(Color.white);

2.生成验证码接口

	@RequestMapping("/getVerifiCode.action")
	@ResponseBody
	public String getVerifiCode(Map<String, Object> requestMap, HttpSession session, HttpServletRequest request, HttpServletResponse response) throws IOException {

		ImageVerificationCode ivc = new ImageVerificationCode();     //使用验证码类，生成验证码类对象
		BufferedImage image = ivc.getImage();  //获取验证码
		request.getSession().setAttribute("text", ivc.getText()); //将验证码的文本存在session中
		ivc.output(image, response.getOutputStream());//将验证码图片响应给客户端

		request.setCharacterEncoding("utf-8");
		String session_vcode=(String) request.getSession().getAttribute("text");    //从session中获取真正的验证码
		return session_vcode;
	}

3.校验验证码接口

	@RequestMapping(value = "/checkVerify", method = RequestMethod.POST, headers = "Accept=application/json")
	@ResponseBody
	public boolean checkVerify(@RequestParam String verifyInput, HttpSession session) {
		try {

			//从session中获取随机数
			String inputStr = verifyInput;

			String random = (String) session.getAttribute("text");

			if (random == null || "".equals(random) || !random.equalsIgnoreCase(inputStr)) {
				return false;
			} else {
				return true;
			}

		} catch (Exception e) {
			log.error("验证码校验失败", e);
			return false;
		}
	}

4.拦截器

不要忘记把拦截器放行这两个接口

二、HTML

<div class="form-group">
   <input type="text" id="verify_input" name="title" class="form-control"  placeholder="验证码" autocomplete="off" />
   <div id="verify_image" style="margin: -43px 0px 3px 200px;">
       <img id="imgVerify" style="color: white; cursor:pointer;width: 100px;height: 38px;margin: -38px -32px -22px 0;border-radius: 4px;" title="刷新验证码" onclick="getVerify(this);">
   </div>
</div>

三、JS

function getVerify() {
    $("#verify_input").val("");
    $("#imgVerify").attr("src", './getVerifiCode.action?' + Math.random());//jquery方式
}

function aVerify() {
  let value = $("#verify_input").val();
  if (value == '') {
    alert('[[#{login.hint10}]]');
    return 0;
  }
  $.ajax({
    async: false,
    type: 'post',
    url: './checkVerify',
    dataType: "json",
    data: {
      verifyInput: value
    },
    success: function (result) {
      if (result) {
      	.....//验证用户名密码逻辑
      } else {
		alert("验证码输入错误，请重新输入!");
		getVerify();
      }
    }
  });
}