web開發:驗證碼是什麼?原理是什麼?怎麼做出來一個驗證碼?

用戶名:

密碼:

驗證碼:



CheckImgServlet

package com.huanfeng.cn;

import java.awt.Color;

import java.awt.Font;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.image.BufferedImage;

import java.io.BufferedReader;

import java.io.FileReader;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

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;

/**

* 驗證碼生成程序

*

*

*

*/

public class CheckImgServlet extends HttpServlet {

// 集合中保存所有成語

private List words = new ArrayList();

@Override

public void init() throws ServletException {

// 初始化階段,讀取new_words.txt

// web工程中讀取 文件,必須使用絕對磁盤路徑

String path = getServletContext().getRealPath("/WEB-INF/new_words.txt");

try {

BufferedReader reader = new BufferedReader(new FileReader(path));

String line;

while ((line = reader.readLine()) != null) {

words.add(line);

}

reader.close();

} catch (IOException e) {

e.printStackTrace();

}

}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// 禁止緩存

// response.setHeader("Cache-Control", "no-cache");

// response.setHeader("Pragma", "no-cache");

// response.setDateHeader("Expires", -1);

int width = 120;

int height = 30;

// 步驟一 繪製一張內存中圖片

BufferedImage bufferedImage = new BufferedImage(width, height,

BufferedImage.TYPE_INT_RGB);

// 步驟二 圖片繪製背景顏色 ---通過繪圖對象

Graphics graphics = bufferedImage.getGraphics();// 得到畫圖對象 --- 畫筆

// 繪製任何圖形之前 都必須指定一個顏色

graphics.setColor(getRandColor(200, 250));

graphics.fillRect(0, 0, width, height);

// 步驟三 繪製邊框

graphics.setColor(Color.WHITE);

graphics.drawRect(0, 0, width - 1, height - 1);

// 步驟四 四個隨機數字

Graphics2D graphics2d = (Graphics2D) graphics;

// 設置輸出字體

graphics2d.setFont(new Font("宋體", Font.BOLD, 18));

Random random = new Random();// 生成隨機數

int index = random.nextInt(words.size());

String word = words.get(index);// 獲得成語

// 定義x座標

int x = 10;

for (int i = 0; i < word.length(); i++) {

// 隨機顏色

graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random

.nextInt(110), 20 + random.nextInt(110)));

// 旋轉 -30 --- 30度

int jiaodu = random.nextInt(60) - 30;

// 換算弧度

double theta = jiaodu * Math.PI / 180;

// 獲得字母數字

char c = word.charAt(i);

// 將c 輸出到圖片

graphics2d.rotate(theta, x, 20);

graphics2d.drawString(String.valueOf(c), x, 20);

graphics2d.rotate(-theta, x, 20);

x += 30;

}

// 將驗證碼內容保存session

request.getSession().setAttribute("checkcode_session", word);

// 步驟五 繪製干擾線

graphics.setColor(getRandColor(160, 200));

int x1;

int x2;

int y1;

int y2;

for (int i = 0; i < 30; i++) {

x1 = random.nextInt(width);

x2 = random.nextInt(12);

y1 = random.nextInt(height);

y2 = random.nextInt(12);

graphics.drawLine(x1, y1, x1 + x2, x2 + y2);

}

// 將上面圖片輸出到瀏覽器 ImageIO

graphics.dispose();// 釋放資源

//將圖片寫到response.getOutputStream()中

ImageIO.write(bufferedImage, "jpg", response.getOutputStream());

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doGet(request, response);

}

/**

* 取其某一範圍的color

*

* @param fc

* int 範圍參數1

* @param bc

* int 範圍參數2

* @return Color

*/

private 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);

}

}

new_words.txt

這個文件中全是成語,作用就是用來顯示的

web開發:驗證碼是什麼?原理是什麼?怎麼做出來一個驗證碼?

效果

web開發:驗證碼是什麼?原理是什麼?怎麼做出來一個驗證碼?

點擊驗證碼,驗證碼發生變化

web開發:驗證碼是什麼?原理是什麼?怎麼做出來一個驗證碼?

至此驗證碼就ok了,但是有一些細節需要解釋一下

servlet中

web開發:驗證碼是什麼?原理是什麼?怎麼做出來一個驗證碼?

web開發:驗證碼是什麼?原理是什麼?怎麼做出來一個驗證碼?

第一張圖片是讀取成語放到words集合中

第二張圖片ImageIO.write(bufferedImage, "jpg", response.getOutputStream());代碼的意思是將生成的圖片bufferedImage以.jpg的形式寫到response的緩衝區,寫的內容在哪裡顯示呢?誰訪問這個servlet就在哪裡顯示

web開發:驗證碼是什麼?原理是什麼?怎麼做出來一個驗證碼?

這個servlet是在圖片標籤下訪問的,所以圖片返回的圖片在img位置顯示,可以這麼理解servlet的作用就是生成一張圖片,可以理解為他就是一張圖片,所以src=這個servlet的地址,就是src=圖片地址一個效果

在html中點擊這個圖片,那麼驗證碼會變化

web開發:驗證碼是什麼?原理是什麼?怎麼做出來一個驗證碼?

這個代碼是隻要點擊圖片就變化,也就是說只要點擊,就從新運行一下servlet就OK了

,因為有緩存的原因,如果直接寫obj.class="lazy" data-original="/WWW/checkImg"這個瀏覽器以為還是原來的鏈接,那就把原來的圖片還給他所以加個時間參數,因為永遠都在變化,所以每次點擊都會產生新的圖片,src=一個servlet就相當於頁面開始運行訪問這個servlet,以後點擊之後,觸發事件,有運行了servlet

題外話

web開發:驗證碼是什麼?原理是什麼?怎麼做出來一個驗證碼?

當我們訪問這個jsp的時候,客戶端會請求服務器幾次?

應該是5次,第一次請求這個jsp頁面,jsp將頁面返回給客戶端,客戶端收到之後發現,還需要一個css,和js以及1.jpg,2.jpg,所以它還會訪問四次服務器用來獲取數據,所以一共5次,既然是客戶端訪問,那麼也就是說這些地址應該也瀏覽器訪問的地址,帶著web應用的名稱

回過頭來說

web開發:驗證碼是什麼?原理是什麼?怎麼做出來一個驗證碼?

這個代碼,瀏覽器發現圖片標籤的地址還要訪問,所以就會訪問/WWW/checkImg,就相當於運行了這個servlet,這個servlet產生一張圖片,正好在這顯示,所以說這個servlet不是自動運行的,而是瀏覽器訪問的,這個不用我們操作,瀏覽器有地址就會主動去訪問。


分享到:


相關文章: