1、生成内存验证码
package cn.hubu.servlet; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.awt.*; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random; @WebServlet("/checkCodeServlet") public class CheckCodeServlet extends HttpServlet { // 图片高度 private static final int IMG_HEIGHT = 50; // 图片宽度 private static final int IMG_WIDTH = 100; // 验证码长度 private static final int CODE_LEN = 4; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request,response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String captcha = ""; // 存放生成的验证码 //1.创建一对象，在内存中图片(验证码图片对象) BufferedImage image = new BufferedImage(IMG_WIDTH,IMG_HEIGHT,BufferedImage.TYPE_3BYTE_BGR); //2.美化图片 //2.1 填充背景色 Graphics g = image.getGraphics();//画笔对象 //设置字体 g.setFont(new Font("SimSong",Font.ITALIC,20)); //设置画笔颜色 g.setColor(Color.PINK); //填充区域 g.fillRect(0,0,IMG_WIDTH,IMG_HEIGHT); //2.2画边框 g.setColor(Color.BLUE); g.drawRect(0,0,IMG_WIDTH-1,IMG_HEIGHT-1); String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789"; //生成随机角标 Random ran = new Random(); //2.3写验证码 for(int i=1;i<=CODE_LEN;i++){ int index = ran.nextInt(str.length()); //获取字符 // 随机生成验证码颜色 g.setColor(new Color(ran.nextInt(150), ran.nextInt(200), ran.nextInt(255))); char ch = str.charAt(index); //2.3写验证码 g.drawString(ch+"",IMG_WIDTH/5*i,IMG_HEIGHT/2); captcha+=ch; } //2.4画干扰线 g.setColor(Color.GREEN); //随机生成坐标点 for(int j = 0; j < 10; j++){ int x1 = ran.nextInt(IMG_WIDTH); int x2 = ran.nextInt(IMG_WIDTH); int y1 = ran.nextInt(IMG_HEIGHT); int y2 = ran.nextInt(IMG_HEIGHT); //划线 g.drawLine(x1,y1,x2,y2); } //3.将图片输出到页面展示 ImageIO.write(image,"jpg",response.getOutputStream()); } }
2、前台页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /* 分析： 点击超链接或者图片，需要换一张 1.给超链接和图片绑定单击事件 2.重新设置图片的src属性值 */ window.onload = function() { //1.获取图片对象 var img = document.getElementById("checkCode"); //2.绑定单击事件 img.onclick = function () { //加时间戳 var date = new Date().getTime(); img.src = "/test/checkCodeServlet?"+ date; } } </script> </head> <body> <img id="checkCode" src="/test/checkCodeServlet"> <a id="change" href="">看不清换一张？</a> </body> </html>