生成圖片驗證碼的兩種實現方式
阿新 • • 發佈:2019-01-29
最近工作中,需求讓新加一個圖片驗證碼功能,其實這個功能之前自己寫過,想必跟大家現在心裡想到的實現方式一樣,要麼是通過servlet實現請求操作,要麼是通過get請求實現操作。然後在後臺通過session儲存圖片上的字串,和之後前臺請求過來的帶的輸入的字串引數,做比較,判斷是否一樣。這種方式在這就不仔細說了,方法程式碼網上都有參考,下邊會附上相關文獻。
在這裡主要說一下另外一種的實現方式,是在一篇部落格裡邊看到的,寫的挺好的,下邊也有來源地址:
由於考慮到在多臺機器上跑,不能用session, 於是決定 按照以下方案解決:
1,頁面載入時,ajax非同步呼叫後臺;
2,後臺生成驗證碼,生成的驗證碼圖片用base64編碼轉變成字串,與此同時將驗證碼加密存放在json返回值中(驗證碼的加密可以自己選用加密方式,只要加密解密能對應上就行);
3,頁面接受驗證碼(加密)存放在隱藏域中,頁面用img標籤接受base64編碼的圖片,同時給
img標籤繫結點選事件,呼叫2生成驗證碼。
4,當頁面提交時,驗證加密驗證碼和使用者輸入驗證碼加密的字串即可。
相同點:
都是要想生成BufferedImage;
不同點:
傳統的用session的手法是最後將image輸出到輸入流裡邊,返回到客戶端,直接src裡邊get方法去接收
image生成方式就不細說了,可以網上檢視 ByteArrayOutputStream
os = new ByteArrayOutputStream(); OutputStream b64 = new Base64.OutputStream(os);
ImageIO.write(bi,
"png", b64);//寫入的是base64編碼後的字串 String result = os.toString("UTF-8");
String param = "data:image/png;base64,"+result;//拼接固定的接收格式
resultMap.put("image",param);//返回前臺
js接收後, $("#imgObj").attr("src",param); <img id="imgObj" src="" />
參考文獻:
- BufferedImage image = (BufferedImage) objs[1]; //image生成方式就不細說了,可以網上檢視
- response.setContentType("image/png");
- OutputStream os = response.getOutputStream();
- ImageIO.write(image, "png", os);