【Spring】基於SpringMVC的圖片驗證碼功能實現

后台實現代碼：

ImgController.java 文件

package cn.shop.controller;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.google.gson.Gson;

@Controller
public class ImgController {

    @RequestMapping({"authCode.htgo"})
    public void getAuthCode(HttpServletRequest request, HttpServletResponse response,HttpSession session)
            throws IOException {
        int width = 63;
        int height = 37;
        Random random = new Random();
        //設置response頭信息
        //禁止緩存
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);

        //生成緩沖區image類
        BufferedImage image = new BufferedImage(width, height, 1);
        //產生image類的Graphics用於繪制操作
        Graphics g = image.getGraphics();
        //Graphics類的樣式
        g.setColor(this.getRandColor(200, 250));
        g.setFont(new Font("Times New Roman",0,28));
        g.fillRect(0, 0, width, height);
        //繪制干擾線
        for(int i=0;i<40;i++){
            g.setColor(this.getRandColor(130, 200));
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int x1 = random.nextInt(12);
            int y1 = random.nextInt(12);
            g.drawLine(x, y, x + x1, y + y1);
        }

        //繪制字符
        String strCode = "";
        for(int i=0;i<4;i++){
            String rand = String.valueOf(random.nextInt(10));
            strCode = strCode + rand;
            g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
            g.drawString(rand, 13*i+6, 28);
        }
        //將字符保存到session中用於前端的驗證
        session.setAttribute("strCode", strCode);
        
        g.dispose();

        ImageIO.write(image, "JPEG", response.getOutputStream());
        response.getOutputStream().flush();
    }
    
    //創建顏色
    Color getRandColor(int fc,int bc){
        Random random = new Random();
        if(fc>255)
            fc = 255;
        if(bc>255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r,g,b);
    }
    /**
     * 進行驗證用戶的驗證碼是否正確
     * @param value 用戶輸入的驗證碼
     * @param request HttpServletRequest對象
     * @return 一個String類型的字符串。格式為：<br/>
     *                     {"res",boolean},<br/>
     *                 如果為{"res",true}，表示驗證成功<br/>
     *                 如果為{"res",false}，表示驗證失敗
     */
    @RequestMapping("validate.htgo")
    @ResponseBody
    public String validate(String value,HttpServletRequest request){
        String valueCode=(String)request.getSession().getAttribute("strCode");
        Map map=new HashMap();
        if(valueCode!=null){
            if(valueCode.equals(value)){
                map.put("res", true);
                return new Gson().toJson(map);
            }
        }
        map.put("res", false);
        return new Gson().toJson(map);
    }
}

前端部分代碼：

    <div class="form-group">
        驗證碼：<input id="authCode" name="authCode" type="text"/>
        <!--這里img標簽的src屬性的值為后台實現圖片驗證碼方法的請求地址-->
        <label><img type="image" src="authCode.do" id="codeImage" onclick="chageCode()" title="圖片看不清？點擊重新得到驗證碼" style="cursor:pointer;"/></label>
        <label><a onclick="chageCode()">換一張</a></label>
    </div>

實現點擊圖片更新js的方法：

    function chageCode(){
        $('#codeImage').attr('src','authCode.do?abc='+Math.random());//鏈接后添加Math.random，確保每次產生新的驗證碼，避免緩存問題。
    }

表單提交的時候，可以進行Ajax驗證，用戶的輸入是否正確：

$.post(
  "validate.do",
  {"value":$("#code_input").val()},
  function(res){
      if(res.res){
          alert("驗證成功");
       }else{
          alert("驗證失敗");
　　　　　　//刷新驗證碼圖片
　　　　　　$("#codeImage").trigger("click");
       }
  },
  "JSON"
);