Servlet实现图片登陆验证码

生成图片验证码的工具类VerifyCode.java

import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Base64;
import java.util.Random;
import javax.imageio.ImageIO;

public class VerifyCode {
	 	private int w = 70;
	    private int h = 35;
	    private Random r = new Random();
	    // {"宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑", "楷体_GB2312"}
	    private String[] fontNames  = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"};
	    private String codes  = "23456789abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
	    private Color bgColor  = new Color(255, 255, 255);
	    private String text ;

	    private Color randomColor () {
	        int red = r.nextInt(150);
	        int green = r.nextInt(150);
	        int blue = r.nextInt(150);
	        return new Color(red, green, blue);
	    }

	    private Font randomFont () {
	        int index = r.nextInt(fontNames.length);
	        String fontName = fontNames[index];
	        int style = r.nextInt(4);
	        int size = r.nextInt(5) + 24; 
	        return new Font(fontName, style, size);//指定字体名称、样式和点大小，创建一个新 Font。
	    }
	    //画干扰的线条
	    private void drawLine (BufferedImage image) {
	        int num  = 3;//画三条
	        Graphics2D g2 = (Graphics2D)image.getGraphics();
	        for(int i = 0; i < num; i++) {
	            int x1 = r.nextInt(w);
	            int y1 = r.nextInt(h);
	            int x2 = r.nextInt(w);
	            int y2 = r.nextInt(h);
	            g2.setStroke(new BasicStroke(1.5F));
	            g2.setColor(Color.BLUE);
	            g2.drawLine(x1, y1, x2, y2);
	        }
	    }

	    private char randomChar () {
	        int index = r.nextInt(codes.length());
	        return codes.charAt(index);
	    }

	    private BufferedImage createImage () {
	        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
	        Graphics2D g2 = (Graphics2D)image.getGraphics();
	        g2.setColor(this.bgColor);
	        g2.fillRect(0, 0, w, h);
	        return image;
	    }

	    public BufferedImage getImage () {
	        BufferedImage image = createImage();
	        Graphics2D g2 = (Graphics2D)image.getGraphics();
	        StringBuilder sb = new StringBuilder();
	        // 向图片中画4个字符
	        for(int i = 0; i < 4; i++)  {
	            String s = randomChar() + "";
	            sb.append(s); 
	            float x = i * 1.0F * w / 4;
	            g2.setFont(randomFont());
	            g2.setColor(randomColor());
	            /**
	             * 首字符的基线位于用户空间的 (x, h-5) 位置处
	             * 原点在左上角,X轴递增的方向是从左向右;Y轴是从上到下
	             * 在提供的坐标位于基线上最左边字符的情况下，可以从右到左呈现字形
	             * h-5表示y轴方向,向上偏移了5
	             */
	            g2.drawString(s, x, h-5);
	        }
	        this.text = sb.toString();
	        drawLine(image);
	        return image;
	    }

	    public String getText () {
	        return text;
	    }

	    public static void output (BufferedImage image, OutputStream out) 
	                throws IOException {
	        ImageIO.write(image, "JPEG", out);
	    }
		
	    public static String BuffImgToBase64(BufferedImage image,String imageFormatName) {
	    	 if("".equals(imageFormatName)){
	             imageFormatName = "png";
	         }
	         ByteArrayOutputStream stream = new ByteArrayOutputStream();
	         try {
				ImageIO.write(image, imageFormatName, stream);
			} catch (IOException e) {
				e.printStackTrace();
			}
	         String s = Base64.getEncoder().encodeToString(stream.toByteArray());
	         return s;
	    }

}

访问生成验证码的Servlet

@WebServlet(urlPatterns="/verifyCode")
public class VerifyImgServlet extends HttpServlet{
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("application/json;charset=utf-8");
		HttpSession session= req.getSession();
		VerifyCode verifyCode=new VerifyCode();
		String base64 = VerifyCode.BuffImgToBase64(verifyCode.getImage(), "png");
		session.setAttribute("code", verifyCode.getText());
		JSONObject jsonObject=new JSONObject();
		jsonObject.put("verifyCode", "data:image/png;base64,"+base64);
		resp.getWriter().write(jsonObject.toString());
	}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
}

接收处理返回信息的Servlet

@WebServlet(urlPatterns="/doVerify")
public class DoVerify extends HttpServlet{
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("application/json;charset=utf-8");
		String code=req.getParameter("code");
		HttpSession session= req.getSession();
		JSONObject jsonObject=new JSONObject();
		//忽略大小写
		if(code.toUpperCase().equals(session.getAttribute("code").toString().toUpperCase())) {
			jsonObject.put("flag", true);
		}else {
			jsonObject.put("flag", false);
		}
		resp.getWriter().write(jsonObject.toString());
	}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp); 
	}
}

前端界面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input id=‘inp‘ />
	<img src=‘‘ />
</body>
<script src=‘lib/jquery-1.8.0.js‘></script>
<script>
	$(document).ready(function(){
		$.ajax({
			url:/*你自己的url*/+"/verifyCode",
			success:function(res){
				$(‘img‘).attr("src",res.verifyCode)
			}
		})
		$(‘#inp‘).keypress(function(e){
			if(e.keyCode==13){
				$.ajax({
					url:/*你自己的url*/+"/doVerify",
					data:{
						code:this.value
					},
					success:function(res){
						if(res.flag){
							alert("成功")
						}else{
							alert("失败")
						}
					}
				})
			}
		})
	})
</script>
</html>

具体效果：

Servlet实现图片登陆验证码