簡易驗證碼demo

阿新 • • 發佈：2020-08-19

java 實現程式碼：

package com..utils.yzm;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class SzYzmController {

    @RequestMapping("/yzmImage.do")
    public void yzmImage(HttpServletRequest request,HttpServletResponse response) throws IOException {
        response.setHeader( 
"pragma", "no-cache");
        response.setHeader("cache-control", "no-cache");
        response.setHeader("expires", "0");

      //在記憶體中建立一個長80，寬30的圖片，預設黑色背景
        int width = 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", checkCode);
 
        //設定畫筆顏色為黃色,字型的小大,並向圖片上寫入驗證碼
        g.setColor(Color.RED);
        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 = "0123456789";
        int size = base.length();
        Random r = new Random();
        StringBuilder sb = new StringBuilder();
        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();
    }   
}

HTML 頁面：

    <div class="form-group col-sm-6">
        <label class="col-sm-4 control-label">驗證碼：</label>
            <div class="col-sm-8">
                <img id="checkImg" class="login-icon-yzm" src="<%=webRoot %>/yzmImage.do?codeType=checkCode" onClick="picReload(this)">
                <input type="text" class="form-control"  id="imgCheck" placeholder="請輸入驗證碼"  onkeyup="upperCase()">
                <span id = "img" class="help-block2" style = "display : none;">&nbsp&nbsp請正確輸入驗證碼</span>
            </div>
    </div>

JS 控制：

    //重新整理驗證碼
    function picReload(img) {    
        img.setAttribute('src', webRoot
            + '/yzmImage.do?codeType=checkCode & a='
            + Math.random());
    }




或 在JS裡 自動重新整理： $("#checkImg").click();