Java隨機生成圖片與HTML表單中的驗證碼實現

weixin_33670713發表於2018-05-14

Java隨機生成圖片

用Java語言生成一個帶有字串文字的圖片總結來說只需要如下四步:

  • 1.建立圖片緩衝區
  • 2.設定圖片緩衝區的寬高及儲存圖片的型別
  • 3.得到這個圖片的繪製環境(拿到畫筆)
  • 4.將圖片儲存起來

程式碼如下:

//第一、二步,傳入引數為緩衝區寬、高、儲存圖片型別
BufferedImage image=new BufferedImage(width1,height1,BufferedImage.TYPE_INT_RGB);

//第三步,得到繪製環境(需要用到Graphics類)
Graphics paint=image.getGraphics();
paint.setColor(Color.WHITE);//設定畫筆顏色為白色
paint.fillRect(start,end,width2,height2);//繪製矩形並填充,將圖片緩衝區的(start,end)座標作為繪製圖片的左上角座標,繪製圖片寬為width2、高為height2
paint.setColor(Color.RED);//設定畫筆顏色為紅色
paint.drawString(str,x,y);//設定需要繪製在圖片上的文字,引數為字串、字串所在的x座標和y座標

//第四步,將圖片儲存起來(需要用到ImageIO類)
ImageIO.write(image,"JPEG",out);//引數為圖片緩衝區、圖片型別、輸出流  

通過以上程式碼便可實現用java語言生成一個簡易的帶有字串文字的圖片,具體實現如下,首先在IDEA中建立VerifyCode.java類:

1780941-9e2d6b77c6c27217.png
image

有錯誤,請將g.drawStrig(sb.toString(),width/4,height-5);改為g.drawString(str,i*width/4,height-5);
1780941-eadaa8c59bbbb51e.png
image

1780941-6699fed1d260f9b8.png
image

通過程式碼VerifyCode vc=new VerifyCode();建立VerifyCode物件後就可以呼叫上述所有方法便可以實現隨機驗證碼的圖片了。

在HTML表單中實現驗證碼

借用上篇Java Web學習筆記之session入門中的儲存使用者登入資訊案例中的程式碼,新增:

  • VerifyServlet.java:生成圖片,儲存圖片上的文字到session域中,將圖片響應給客戶端。
  • LoginServlet.java中新增作用:判斷使用者輸入的驗證碼是否正確,若正確則跳轉至下一連結,若錯誤則儲存錯誤資訊到request域中,然後請求轉發至login.jsp登入頁面。

程式碼如下圖:

<div align="center">VerifyServlet.java</div>

1780941-d73771971c53af5a.png
image

<div align="center">LoginServlet.java</div>

1780941-63cc4d48299940e7.png
image

<div align="center">login.jsp(用到了javascript語法來更換驗證碼)</div>

1780941-1b0d2a9efdce2594.png
image

10月8日更正:途中的js程式碼有錯誤,將"ducument"改為"document"。

通過如上程式碼便可實現HTML中的驗證碼效果。

2018.3.19更

歡迎加入我的Java交流1群:659957958。群裡目前已有1800人,每天都非常活躍,但為了篩選掉那些不懷好意的朋友進來搞破壞,所以目前入群方式已改成了付費方式,你只需要支付9塊錢,即可獲取到群檔案中的所有乾貨以及群裡面各位前輩們的疑惑解答;為了鼓勵良好風氣的發展,讓每個新人提出的問題都得到解決,所以我將得到的入群收費收入都以紅包的形式發放到那些主動給新手們解決疑惑的朋友手中。在這裡,我們除了談技術,還談生活、談理想;在這裡,我們為你的學習方向指明方向,為你以後的求職道路提供指路明燈;在這裡,我們把所有好用的乾貨都與你分享。還在等什麼,快加入我們吧!

2018.4.21更:如果群1已滿或者無法加入,請加Java學習交流2群:305335626 。群2作為群1的附屬群,除了日常的技術交流、資料分享、學習方向指明外,還會在每年網際網路的秋春招時節在群內釋出大量的網際網路內推方式,話不多說,快上車吧!


聯絡

If you have some questions after you see this article,you can tell your doubts in the comments area or you can find some info by clicking these links.

相關文章