//這個驗證碼畫布生成是師兄寫的，不是本人寫的
1 package com.didinx.common; 2 3 import javax.imageio.ImageIO; 4 import javax.servlet.ServletException; 5 import javax.servlet.annotation.WebServlet; 6 import javax.servlet.http.HttpServlet; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 import java.awt.*; 10 import java.awt.image.BufferedImage; 11 import java.io.IOException; 12 import java.util.Random; 13 14 /** 15 * 驗證碼 16 */ 17 @WebServlet("/checkCodeServlet") 18 public class CheckCodeServlet extends HttpServlet { 19 public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { 20 21 //服務器通知瀏覽器不要緩存 22 response.setHeader("pragma","no-cache"); 23 response.setHeader("cache-control","no-cache"); 24 response.setHeader("expires","0"); 25 26 //在內存中創建一個長80，寬30的圖片，默認黑色背景 27 //參數一：長 28 //參數二：寬 29 //參數三：顏色 30 int width = 80; 31 int height = 30; 32 BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); 33 34 //獲取畫筆 35 Graphics g = image.getGraphics(); 36 //設置畫筆顏色為灰色 37 g.setColor(Color.GRAY); 38 //填充圖片 39 g.fillRect(0,0, width,height); 40 41 //產生4個隨機驗證碼，12Ey 42 String checkCode = getCheckCode(); 43 //將驗證碼放入HttpSession中 44 request.getSession().setAttribute("code",checkCode); 45 46 //設置畫筆顏色為黃色 47 g.setColor(Color.YELLOW); 48 //設置字體的小大 49 g.setFont(new Font("黑體",Font.BOLD,24)); 50 //向圖片上寫入驗證碼 51 g.drawString(checkCode,15,25); 52 53 //將內存中的圖片輸出到瀏覽器 54 //參數一：圖片對象 55 //參數二：圖片的格式，如PNG,JPG,GIF 56 //參數三：圖片輸出到哪里去 57 ImageIO.write(image,"PNG",response.getOutputStream()); 58 } 59 /** 60 * 產生4位隨機字符串 61 */ 62 private String getCheckCode() { 63 String base = "0123456789ABCDEFGabcdefg"; 64 int size = base.length(); 65 Random r = new Random(); 66 StringBuffer sb = new StringBuffer(); 67 for(int i=1;i<=4;i++){ 68 //產生0到size-1的隨機值 69 int index = r.nextInt(size); 70 //在base字符串中獲取下標為index的字符 71 char c = base.charAt(index); 72 //將c放入到StringBuffer中去 73 sb.append(c); 74 } 75 return sb.toString(); 76 } 77 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 78 this.doGet(request,response); 79 } 80 }

驗證碼生成效果如圖：

生成驗證碼后，可以用進行驗證碼校驗，可以用ajax【blur（失去焦點事件）】也可以用同步提交，與表單同時提交，驗證碼校驗程序如下，用的同步，與表單同步提交：

$("#loginForm").submit(function () {
//id選擇器獲得頁面輸入的用戶名var username = $("#email").val();
//id選擇器獲得頁面輸入的密碼var password = $("#password").val();
//id選擇器獲得頁面輸入的驗證碼var checkcode = $("#check").val();$.post("/userServlet?methodName=login", {username: username,password: password,checkcode: checkcode
//也可以用表單序列化 同樣是id選擇器
// var formData=$("#loginForm").serialize();
//可以在后臺通過Map<String,String[]>map=request.getparameterMap獲取
//}, function (result) {console.log(result);if (result.flag) { //alert("大帥哥");location.href = "/index.html";} else {//alert("小帥哥")$("#errorMsg").show().html(result.errorMsg)}}, "json");return false;})

后臺web程序如下：

private void login(HttpServletRequest request, HttpServletResponse response) throws IOException {String username = request.getParameter("username");String password = request.getParameter("password");String checkcode = request.getParameter("checkcode");String code = (String) request.getSession().getAttribute("code");ResultInfo resultInfo = new ResultInfo();if (!code.equalsIgnoreCase(checkcode)) {resultInfo.setFlag(false);resultInfo.setErrorMsg("驗證碼錯誤，請重新輸入");String str = JSON.toJSONString(resultInfo);response.getWriter().print(str);return;}UserService userService = new UserServiceImp();User user = new User();user.setUsername(username);user.setPassword(password);boolean outcome = userService.login(user);if (outcome) {resultInfo.setFlag(true);} else {resultInfo.setFlag(false);resultInfo.setErrorMsg("用戶名或密碼錯誤！請重新輸入！");}String str1 = JSON.toJSONString(resultInfo);response.getWriter().print(str1);}

②：通過鼠標點擊驗證碼圖片切換驗證碼:

//給圖片綁定點擊事件

<img src="/checkCodeServlet" οnclick="changeimg(this)>;

//點擊事件所調用的方法

funcion changeimg(img){

//通過獲取點擊時的當前時間并且拼接在url后面加載不同的圖片（url參數不同，所以圖片不同）

img.src="checkCodeServlet?data="+new Date.getTime();

}

?

轉載于:https://www.cnblogs.com/linsky/p/10356859.html

總結

以上是生活随笔為你收集整理的验证码画布生成以及点击图片切换验证码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。