//首先定義一個自己的類并且去繼承HttpServlet這個類
public class CheckImg extends HttpServlet｛
?? ?//復(fù)寫HttpServlet中的doGet方法
?? ?public void doGet(HttpServletRequest req，HttpServletResponse resp) throws ServletException,
?? ?IOException{
?? ??? ?//準(zhǔn)備一張畫紙，將驗證碼中的數(shù)字字母寫到這張畫紙中
?? ??? ?int width = 120;
?? ??? ?int height = 30;
?? ??? ?BufferedImage bufi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
?? ??? ?//這里面的width、height、就是這張畫紙的長寬。BufferedImage.TYPE_INT_RGB就是這張畫紙基于
?? ??? ?//RGB三原色來進(jìn)行畫


?? ??? ?//這個時候并沒有在這張紙上書寫任何內(nèi)容，但是已經(jīng)可以像客戶端響應(yīng)請求了
?? ??? ?ImageIO.write(bufi, "jpg", resp.getOutputStream());
?? ?}
｝

這時候可以在瀏覽器上看到一個長120，高30的矩形小框。

//設(shè)置畫筆顏色
g.setColor(Color.WHITE);
//將這個顏色填充到整個畫紙
g.fillRect(0,0,width,height);

瀏覽器上就顯示出來一個白色的小框也就是上邊定義的畫紙

開始在畫紙上畫驗證碼了。

//定義圖片上可以寫什么數(shù)據(jù)
String data = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
//定義書寫在畫紙上的起始位置
int x =15;
int y =25;
//定義一個隨機(jī)數(shù)
Random r = new Random();
//定義一個StringBuilder字符串緩沖區(qū)
StringBuilder sb = new StringBuilder();
//定義一個循環(huán)給畫紙上寫四個數(shù)據(jù)
for(int i = 0; i < 4; i++){
//從data中隨機(jī)獲取一個下標(biāo)的數(shù)據(jù)
char c = data.charAt(r.nextInt(data.length()));
//每寫一個數(shù)據(jù)就將這個數(shù)放到字符串緩沖區(qū)中
sb.append(c+"")
//隨機(jī)生成畫筆的顏色,RGB三原色隨機(jī)在0-256中隨機(jī)生成
g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
//設(shè)置字體
g.setFont(new Font("黑體",Font.BOLD,26));
//將數(shù)據(jù)寫到畫紙上
g.drawString(c+"",x,y);
?//沒寫完一個調(diào)整下一個數(shù)據(jù)寫的位置
? x += 25;
? }
//循環(huán)結(jié)束也就是所有的數(shù)據(jù)都放在字符串緩沖區(qū)中
HttpSession session = req.getSession();
session.setAttribute("checkNum",sb.toString());

再重啟tomcat在瀏覽器上能看到書寫驗證碼了

在畫紙上添加干擾信息

//添加線類型的干擾信息
? ? ? ? for(int i = 0; i < 15 ; i++){
? ? ? ? ? ? //同樣設(shè)置線的顏色
? ? ? ? ? ? g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
? ? ? ? ? ? //開始劃線,這里需要的四個參數(shù)中前兩個是線開頭的左邊，后邊兩個是線結(jié)束的坐標(biāo)
? ? ? ? ? ? g.drawLine(r.nextInt(width),r.nextInt(height),r.nextInt(width),r.nextInt(height));
? ? ? ? }
? ? ? ? //添加點類型干擾信息
? ? ? ? for (int i = 0 ; i < 150 ; i++){
? ? ? ? ? ? //設(shè)置點的顏色
? ? ? ? ? ? g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
? ? ? ? ? ? //開始畫點,實質(zhì)上這是畫橢圓，將上半軸半徑，左半軸半徑設(shè)置為0就可以看成是一個點
? ? ? ? ? ? g.drawOval(r.nextInt(width),r.nextInt(height),0,0);
? ? ? ? }

在瀏覽器上就能看到驗證碼上充滿點和橫線，降低辨識度

貌似還沒有達(dá)到想要的結(jié)果，將字體設(shè)置一點傾斜度就更好了

//設(shè)置數(shù)據(jù)旋轉(zhuǎn)
double theta =(30 - (r.nextInt(60)))*Math.PI/180;
g.rotate(theta,x,24);
//將數(shù)據(jù)寫到畫紙上
g.drawString(c+"",x,y);
//設(shè)置完旋轉(zhuǎn)要調(diào)回，防止數(shù)據(jù)旋轉(zhuǎn)的看不到
g.rotate(-theta,x,24);

可以看到圖片中的數(shù)據(jù)進(jìn)行了略微的傾斜

html注冊頁面代碼

這里只截取了body和script部分的代碼

<body>

<fieldset id="">
? <legend>注冊頁面</legend>
? <form action="/day02/register2" method="post" id="form" >
? ? <table>
? ? ? <tr>
? ? ? ? <td>用戶名：</td>
? ? ? ? <td><input type="text" name="userName" /><span id="span1"></span></td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>
? ? ? ? ? 密碼：
? ? ? ? </td>
? ? ? ? <td>
? ? ? ? ? <input type="password" name="password" />
? ? ? ? </td>

? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>
? ? ? ? ? 確認(rèn)密碼：
? ? ? ? </td>
? ? ? ? <td>
? ? ? ? ? <input type="password" name="repassword" />
? ? ? ? ? <span id="span2"></span>
? ? ? ? </td>

? ? ? </tr>
? ? ? <tr id="tr4">
? ? ? ? <td>
? ? ? ? ? 性別：
? ? ? ? </td>
? ? ? ? <td>
? ? ? ? ? <input type="radio" name="sex" value="男" />男
? ? ? ? ? <input type="radio" name="sex" value="女" />女
? ? ? ? ? <span id="span3"></span>
? ? ? ? </td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>愛好：</td>
? ? ? ? <td>
? ? ? ? ? <input type="checkbox" name="hobby" value="唱" />唱
? ? ? ? ? <input type="checkbox" name="hobby" value="跳" />跳
? ? ? ? ? <input type="checkbox" name="hobby" value="rap" />rap
? ? ? ? ? <input type="checkbox" name="hobby" value="籃球" />籃球
? ? ? ? ? <span id="span4"></span>
? ? ? ? </td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>國籍：</td>
? ? ? ? <td>
? ? ? ? ? <select name="country" id="country">
? ? ? ? ? ? <option value="none">--請選擇國籍--</option>
? ? ? ? ? ? <option value="中國">中國</option>
? ? ? ? ? ? <option value="韓國">韓國</option>
? ? ? ? ? ? <option value="日本">日本</option>
? ? ? ? ? ? <option value="美國">美國</option>
? ? ? ? ? </select>
? ? ? ? ? <span id="span5"></span>
? ? ? ? </td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>自我評價：</td>
? ? ? ? <td>
? ? ? ? ? <textarea rows="10px" cols="20px" id="textarea" name="describe" ></textarea>
? ? ? ? </td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>
? ? ? ? ? 驗證碼：
? ? ? ? </td>
? ? ? ? <td>
? ? ? ? ? //定義一個input標(biāo)簽，用戶輸入驗證碼
? ? ? ? ? <input type="text" name="check"/>
? ? ? ? ? //input標(biāo)簽后鏈接了上邊寫的驗證碼生成Servlet程序
? ? ? ? ? //并且更改鼠標(biāo)放在圖片上的樣式，和添加了點擊事件
? ? ? ? ? <img src="/day02/demo" id="img" onclick="checkImg()" style = "cursor: pointer">
? ? ? ? ? <a href="javascript:void(0);" onclick="checkImg()">換一張</a>
? ? ? ? </td>
? ? ? </tr>
? ? </table>
? ? <input type="submit" id="btn2" value="提交" />
? ? <input type="button" id="btn1" value="驗證" />
? </form>

</fieldset>
</body>
<script type="text/javascript">
? function checkImg() {
? ?? ?//通過ID屬性拿到img標(biāo)簽
? ? var img = document.getElementById("img");
? ? //當(dāng)瀏覽器發(fā)現(xiàn)兩次請求的URL相同時不會主動的向服務(wù)器請求圖片
? ? //所以需要實時的更改URL，這里采用的是在URL后邊拼接一個當(dāng)前系統(tǒng)時間的毫秒值
? ? //這樣就能保證每一毫秒的URL都不同，從而瀏覽器會給服務(wù)器發(fā)送圖片的請求
? ? img.src ="/day02/demo?"+new Date().getTime()

? }
</script>

完整的代碼

@WebServlet(urlPatterns = "/demo")
public class CheckImg extends HttpServlet {
? ? //復(fù)寫HttpServlet中的doGet方法
? ? public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
? ? IOException{
? ? ? ? //準(zhǔn)備一張畫紙，將驗證碼中的數(shù)字字母寫到這張畫紙中
? ? ? ? int width = 120;
? ? ? ? int height = 30;
? ? ? ? BufferedImage bufi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
? ? ? ? //這里面的width、height、就是這張畫紙的長寬。BufferedImage.TYPE_INT_RGB就是這張畫紙基于
? ? ? ? //RGB三原色來進(jìn)行畫
? ? ? ? //獲取一個畫筆對象，給圖片上畫畫
? ? ? ? Graphics2D g = (Graphics2D) bufi.getGraphics();
? ? ? ? //設(shè)置畫筆顏色
? ? ? ? g.setColor(Color.WHITE);
? ? ? ? //將這個顏色填充到整個畫紙
? ? ? ? g.fillRect(0,0,width,height);
? ? ? ? //定義圖片上可以寫什么數(shù)據(jù)
? ? ? ? String data = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
? ? ? ? //定義書寫在畫紙上的起始位置
? ? ? ? int x =15;
? ? ? ? int y =25;
? ? ? ? //定義一個隨機(jī)數(shù)
? ? ? ? Random r = new Random();
? ? ? ? //定義一個循環(huán)給畫紙上寫四個數(shù)據(jù)
? ? ? ? for(int i = 0; i < 4; i++){
? ? ? ? ? ? //從data中隨機(jī)獲取一個下標(biāo)的數(shù)據(jù)
? ? ? ? ? ? char c = data.charAt(r.nextInt(data.length()));
? ? ? ? ? ? //隨機(jī)生成畫筆的顏色,RGB三原色隨機(jī)在0-256中隨機(jī)生成
? ? ? ? ? ? g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
? ? ? ? ? ? //設(shè)置字體
? ? ? ? ? ? g.setFont(new Font("黑體",Font.BOLD,26));
? ? ? ? ? ?//設(shè)置數(shù)據(jù)旋轉(zhuǎn)
? ? ? ? ? ? double theta =(30 - (r.nextInt(60)))*Math.PI/180;
? ? ? ? ? ? g.rotate(theta,x,24);
? ? ? ? ? ? //將數(shù)據(jù)寫到畫紙上
? ? ? ? ? ? g.drawString(c+"",x,y);
? ? ? ? ? ? //設(shè)置完旋轉(zhuǎn)要調(diào)回，防止數(shù)據(jù)旋轉(zhuǎn)的看不到
? ? ? ? ? ? ?g.rotate(-theta,x,24);

? ? ? ? ? ? //將數(shù)據(jù)寫到畫紙上
? ? ? ? ? ? g.drawString(c+"",x,y);
? ? ? ? ? ? //g.rotate(-theta,r.nextInt(width),24);
? ? ? ? ? ? //設(shè)置完旋轉(zhuǎn)要調(diào)回，防止數(shù)據(jù)旋轉(zhuǎn)的看不到
? ? ? ? ? ? g.rotate(-((10)*3.14/180),15*i+8,7);
? ? ? ? ? ? //每寫完一個調(diào)整下一個數(shù)據(jù)寫的位置
? ? ? ? ? ? x += 25;
? ? ? ? }
? ? ? ? //添加線類型的干擾信息
? ? ? ? for(int i = 0; i < 15 ; i++){
? ? ? ? ? ? //同樣設(shè)置線的顏色
? ? ? ? ? ? g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
? ? ? ? ? ? //開始劃線,這里需要的四個參數(shù)中前兩個是線開頭的左邊，后邊兩個是線結(jié)束的坐標(biāo)
? ? ? ? ? ? g.drawLine(r.nextInt(width),r.nextInt(height),r.nextInt(width),r.nextInt(height));
? ? ? ? }
? ? ? ? //添加點類型干擾信息
? ? ? ? for (int i = 0 ; i < 150 ; i++){
? ? ? ? ? ? //設(shè)置點的顏色
? ? ? ? ? ? g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
? ? ? ? ? ? //開始畫點,實質(zhì)上這是畫橢圓，將上半軸半徑，左半軸半徑設(shè)置為0就可以看成是一個點
? ? ? ? ? ? g.drawOval(r.nextInt(width),r.nextInt(height),0,0);
? ? ? ? }


? ? ? ? //給客戶端響應(yīng)請求
? ? ? ? ImageIO.write(bufi, "jpg", resp.getOutputStream());
? ? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: