一、實現思路

1. 使用BufferedImage用於在記憶體中儲存生成的驗證碼圖片
2. 使用Graphics來進行驗證碼圖片的繪製，並將繪製在圖片上的驗證碼存放到session中用於後續驗證
3. 最後通過ImageIO將生成的圖片進行輸出
4. 通過頁面提交的驗證碼和存放在session中的驗證碼對比來進行校驗

二、生成驗證碼

頁面通過訪問servlet來生成驗證碼，servlet中的程式碼如下：

package org.test;

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;

/**
 * @author worm0527
 * 2016-03-22 23:15:54
 * 生成驗證碼
 */
 

public class ImageServlet extends HttpServlet{
    // 圖片高度
    private static final int IMG_HEIGHT = 100;
    // 圖片寬度
    private static final int IMG_WIDTH = 30;
    // 驗證碼長度
    private static final int CODE_LEN = 4;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws
 
 ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    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中
        req.getSession().setAttribute("code", captcha);
        // 通過ImageIO將圖片輸出
        ImageIO.write(bi, "JPG", resp.getOutputStream());
    }

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62

三、校驗驗證碼

通過前臺提交的驗證碼與session中資料進行對比來校驗驗證碼，程式碼如下：

package org.test;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CheckCodeServlet extends HttpServlet{

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // 獲取存放在session中的驗證碼
        String code = (String) req.getSession().getAttribute("code");
        // 獲取頁面提交的驗證碼
        String inputCode = req.getParameter("code");
        if(code.toLowerCase().equals(inputCode.toLowerCase())) { // 驗證碼不區分大小寫
            // 驗證成功，跳轉到成功頁面
            req.getRequestDispatcher("/success.jsp").forward(req, resp);
        } else { // 驗證失敗
            req.getRequestDispatcher("/fail.jsp").forward(req, resp);
        }
    }

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

驗證碼提交頁面html程式碼：

<form action="<%=request.getContextPath() %>/checkCode" method="post">
    請輸入驗證碼：<input type="text" name="code">
    <input type="submit" value="確定">
</form>
<img alt="驗證碼" id="scode" src="<%=request.getContextPath() %>/getCode" >
<a href="#" onclick="javascript:flushCode();">看不清?</a>

• 1
• 2
• 3
• 4
• 5
• 6

當生成的驗證碼不清楚時需要重新整理重新生成驗證碼，js程式碼如下：

function flushCode() {
    // 每次重新整理的時候獲取當前時間，防止瀏覽器快取重新整理失敗
    var time = new Date();
    document.getElementById("scode").src = "<%=request.getContextPath()%>/getCode?time=" + time;
}