圖片驗證碼效果

Servlet隨機生成一個字串，然后將字串轉成圖片，通過回應的位元組流寫到瀏覽器的img標簽

圖片驗證碼分析

圖片驗證碼的業務邏輯

test\java\com\wzx\service\TestVerificationCodeService.java

public class TestVerificationCodeService {
    @Test
    public void test01() throws IOException {
        //1：創建一個驗證碼的業務
        VerificationCodeService vcs = new VerificationCodeService();
        //2:生產一個隨機的4個字符組成的字串
        String code =  vcs.createRandomCode();
        System.out.println(code);
        //3:將字串轉成圖片
        BufferedImage image =  vcs.changeStringToImage(code);
       //4:使用OutputStream寫到瀏覽器
        System.out.println(image);
        File file = new File(System.currentTimeMillis()+".jpg");
        file.createNewFile();
        FileOutputStream outputStream = new FileOutputStream(file);
        ImageIO.write(image,"jpeg",outputStream);//參1，記憶體中的圖片  參2，格式  參3，位元組輸出流
    }
}

隨機字串生成

src\com\wzx\service\VerificationCodeService.java

//生成驗證碼圖片的業務類
public class VerificationCodeService {
    //生成驗證碼字串
    public String createRandomCode() {
        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";//36
        System.out.println(str.length());
        //Random類  產生指定范圍內的亂數
        Random random = new Random();

        StringBuilder sb = new StringBuilder();

        //截取字符
        for (int i = 0; i < 4; i++) {
            int index = random.nextInt(str.length());//
            char letter = str.charAt(index);
            //System.out.println(letter);
            sb.append(letter);
        }

        return sb.toString();
    }

隨機字串轉圖片

代碼不需要敲，只需要根據不同的樣式要求，能修改字體大小，顏色即可

src\com\wzx\service\VerificationCodeService.java

  //字串轉圖片
    public BufferedImage changeStringToImage(String code) {
        Random rd = new Random();
        //創建一個畫布
        BufferedImage image = new BufferedImage(75, 28, BufferedImage.TYPE_INT_RGB);
        //畫筆
        Graphics g = image.getGraphics();
        //給畫筆設定顏色
        g.setColor(new Color(240,240,240));  //#00000   FFFFFF
        //設定驗證碼的 背景色
        g.fillRect(0, 0, 75, 28);

        g.setFont(new Font("宋體",Font.BOLD,16));

        g.setColor(new Color(0,0,0));  //#00000   FFFFFF
        // g.drawString(checkCodeStr, 20, 20);
        for (int i = 0; i <4 ; i++) {
            //畫字符
            g.setColor(new Color(rd.nextInt(120),rd.nextInt(120),rd.nextInt(120)));
            g.drawString(code.charAt(i)+"", 16*i + rd.nextInt(16), 15 + rd.nextInt(10) );
            if(i % 2 == 0) {//畫線
                g.setColor(new Color(rd.nextInt(120), rd.nextInt(120), rd.nextInt(120)));
                g.drawLine(rd.nextInt(75), rd.nextInt(28), rd.nextInt(75), rd.nextInt(28));
            }
        }
        return image;
    }
}

img標簽顯示驗證碼圖片

web\login.html

<form method="post">
    username:<input type="text" name="username"/><br/>
    password:<input type="password" name="password"/><br/>
    code:<input type="text" name="code"/> <img id="img" src="/web01_reponse/img"/><br/>
    <input type="submit" value="login">
</form>

src\com\wzx\pack06_code\Demo06ImageCodeSevlet.java

@WebServlet("/img")
public class Demo06ImageCodeSevlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1：創建一個驗證碼的業務
        VerificationCodeService vcs = new VerificationCodeService();
        //2:生產一個隨機的4個字符組成的字串
        String code =  vcs.createRandomCode();
        System.out.println(code);
        //3:將字串轉成圖片
        BufferedImage image =  vcs.changeStringToImage(code);
        //4:使用OutputStream寫到瀏覽器
        System.out.println(image);
        ImageIO.write(image,"jpeg",response.getOutputStream());//參1，記憶體中的圖片  參2，格式  參3，位元組輸出流
    }
}

img標簽點擊重繪

<script type="application/javascript">
    var img = document.getElementById("img");
    img.onclick = function(){
        img.src = "/web01_reponse/img?time="+new Date();
    }

</script>