驗證碼的工具以及驗證碼的簡單應用和小tips
阿新 • • 發佈：2020-10-12
以前跟著寫的一段獲取驗證碼的servlet,當時覺得還挺麻煩的要自己畫,最近找到了一個封裝好的工具類記錄一下
先看看以前寫的獲取驗證碼的servlet
package cn.itcast.travel.web.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("/checkCode") public class CheckCodeServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException { //伺服器通知瀏覽器不要快取 response.setHeader("pragma","no-cache"); response.setHeader("cache-control","no-cache"); response.setHeader("expires","0"); //在記憶體中建立一個長80，寬30的圖片，預設黑色背景 //引數一：長 //引數二：寬 //引數三：顏色 intwidth = 80; int height = 30; BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); //獲取畫筆 Graphics g = image.getGraphics(); //設定畫筆顏色為灰色 g.setColor(Color.GRAY); //填充圖片 g.fillRect(0,0, width,height); //產生4個隨機驗證碼，12Ey String checkCode = getCheckCode(); //將驗證碼放入HttpSession中 request.getSession().setAttribute("CHECKCODE_SERVER",checkCode); //設定畫筆顏色為黃色 g.setColor(Color.YELLOW); //設定字型的小大 g.setFont(new Font("黑體",Font.BOLD,24)); //向圖片上寫入驗證碼 g.drawString(checkCode,15,25); //將記憶體中的圖片輸出到瀏覽器 //引數一：圖片物件 //引數二：圖片的格式，如PNG,JPG,GIF //引數三：圖片輸出到哪裡去 ImageIO.write(image,"PNG",response.getOutputStream()); } /** * 產生4位隨機字串 */ private String getCheckCode() { String base = "0123456789ABCDEFGabcdefg"; int size = base.length(); Random r = new Random(); StringBuffer sb = new StringBuffer(); for(int i=1;i<=4;i++){ //產生0到size-1的隨機值 int index = r.nextInt(size); //在base字串中獲取下標為index的字元 char c = base.charAt(index); //將c放入到StringBuffer中去 sb.append(c); } return sb.toString(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request,response); } }
下面是工具類 返回值是一個String 型別的code 還有一個BufferedImage image 物件
在Controller層用ImageIO.write(image,"png",response.getOutputStream)返回，把code存入Session中
package com.mkx_test.utils; import java.awt.*; import java.awt.image.BufferedImage; import java.util.Random; public class CodeImageUtil { private static final char[] chars = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' }; // 字元數量 private static final int SIZE = 4; // 干擾線數量 private static final int LINES = 5; // 寬度 private static final int WIDTH = 100; // 高度 private static final int HEIGHT = 40; // 字型大小 private static final int FONT_SIZE = 30; public static Object[] createImage(){ StringBuffer sb = new StringBuffer(); //建立空白圖片 BufferedImage image = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB); //獲取圖片畫筆 Graphics graphics = image.getGraphics(); //設定畫筆顏色 graphics.setColor(new Color(0xEDEDED)); //繪製矩形背景 graphics.fillRect(0,0,WIDTH,HEIGHT); //畫隨機字元 Random random = new Random(); for (int i=0;i<SIZE;i++){ //獲取隨機字元索引 int j = random.nextInt(chars.length); //設定隨機顏色 graphics.setColor(getRandonColor()); //設定字型大小 graphics.setFont(new Font(null,Font.BOLD+Font.ITALIC,FONT_SIZE)); //畫字元 graphics.drawString(chars[j] + "",i * (WIDTH)/SIZE + 1,HEIGHT*2/3); //記錄字元 sb.append(chars[j]); } //畫干擾線 for (int i = 0;i<LINES;i++){ //設定隨機顏色 graphics.setColor(getRandonColor()); //隨機畫線 graphics.drawLine(random.nextInt(WIDTH),random.nextInt(HEIGHT),random.nextInt(WIDTH),random.nextInt(HEIGHT)); } //返回驗證碼和圖片 return new Object[]{sb.toString(),image}; } /** * 隨機取色 */ private static Color getRandonColor() { Random random = new Random(); Color color = new Color(random.nextInt(256),random.nextInt(256),random.nextInt(256)); return color; } // public static void main(String[] args) throws IOException { // Object[] objs = createImage(); // BufferedImage image = (BufferedImage) objs[1]; // OutputStream os = new FileOutputStream("d:/1.png"); // ImageIO.write(image, "png", os); // os.close(); // } }
Controller層中
/* * 載入驗證碼 */ @RequestMapping("/getCode") public void getCode(HttpServletRequest request,HttpServletResponse response) throws IOException { Object[] objs = CodeImageUtil.createImage(); String code = objs[0].toString(); System.out.println("系統生成的驗證碼是:"+code); //image物件 BufferedImage image =(BufferedImage) objs[1]; //將記憶體中的圖片輸出到瀏覽器 //引數一：圖片物件 //引數二：圖片的格式，如PNG,JPG,GIF //引數三：圖片輸出到哪裡去 ImageIO.write(image,"png",response.getOutputStream()); request.getSession().setAttribute("code",code); }
檢視層jsp中：注意加上點選事件的時間戳,每次都能換到不同的驗證碼圖片
<div class="form-group"> <label for="codeInp">驗證碼</label> <input type="text" id="codeInp" name="code" > <img id="code" src="${pageContext.request.contextPath}/user/getCode" onclick="flushCode(this)"> </div> <script> function flushCode(obj) { let time = new Date().getTime(); obj.src="${pageContext.request.contextPath}/user/getCode?"+time; } </script>