有时候需要后台生成图片验证码,下面是一个方法
后台生成:
package socialPractise.controller.register; import java.awt.Color; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.springframework.stereotype.Component; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import socialPractise.template.ResponseTemplate; @Controller public class VerifyController{ // 图片高度 private static final int IMG_HEIGHT = 100; // 图片宽度 private static final int IMG_WIDTH = 30; // 验证码长度 private static final int CODE_LEN = 4; @RequestMapping("/test") @ResponseBody public String test(){ return "test"; } @RequestMapping("/ImageGen") @ResponseBody protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 用于绘制图片,设置图片的长宽和图片类型(RGB) BufferedImage bi = new BufferedImage(IMG_HEIGHT, IMG_WIDTH, BufferedImage.TYPE_INT_RGB); // 获取绘图工具 Graphics graphics = bi.getGraphics(); graphics.setColor(new Color(100, 230, 200)); // 使用RGB设置背景颜色 graphics.fillRect(0, 0, 100, 30); // 填充矩形区域 // 验证码中所使用到的字符 char[] codeChar = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456".toCharArray(); String captcha = ""; // 存放生成的验证码 Random random = new Random(); for(int i = 0; i < CODE_LEN; i++) { // 循环将每个验证码字符绘制到图片上 int index = random.nextInt(codeChar.length); // 随机生成验证码颜色 graphics.setColor(new Color(random.nextInt(150), random.nextInt(200), random.nextInt(255))); // 将一个字符绘制到图片上,并制定位置(设置x,y坐标) graphics.drawString(codeChar[index] + "", (i * 20) + 15, 20); captcha += codeChar[index]; } // 将生成的验证码code放入sessoin中 HttpSession session = req.getSession(); session.setAttribute("code", captcha); System.out.println(session.getId()); // 通过ImageIO将图片输出 ImageIO.write(bi, "JPG", resp.getOutputStream()); } @RequestMapping("/checkCode") @ResponseBody protected ResponseTemplate checkCode(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 获取存放在session中的验证码 HttpSession session = req.getSession(); System.out.println(session.getId()); String code = (String) session.getAttribute("code"); System.out.println(code); // 获取页面提交的验证码 String inputCode = req.getParameter("code"); System.out.println(inputCode); if(code.toLowerCase().equals(inputCode.toLowerCase())) { // 验证码不区分大小写 return new ResponseTemplate(0, "验证码正确", null); } else { // 验证失败 return new ResponseTemplate(1, "验证码错误", null); } } }
前端验证:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.js"> </script> <script type="text/javascript"> //提交序列化表单 function flushCode() { // 每次刷新的时候获取当前时间,防止浏览器缓存刷新失败 var time = new Date(); document.getElementById("scode").src = "http://localhost:8080/ImageGen?time=" + time; } </script> </head> <body> <form action="http://localhost:8080/checkCode" method="post"> 请输入验证码:<input type="text" name="code"> <input type="submit" value="确定"> </form> <!-- <img alt="验证码" id="scode" src="<%=request.getContextPath() %>/ImageGen" >--> <img alt="验证码" id="scode" src="http://localhost:8080/ImageGen" > <a href="#" onclick="javascript:flushCode();">看不清?</a> </body> </html>