//这个验证码画布生成是师兄写的，不是本人写的
1 package mon; 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 {19public 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个随机验证码，12Ey42 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,GIF56 //参数三：图片输出到哪里去57 ImageIO.write(image,"PNG",response.getOutputStream());58}59/**60* 产生4位随机字符串 61*/62private 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}77public 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();
}
如果觉得《验证码画布生成以及点击图片切换验证码》对你有帮助，请点赞、收藏，并留下你的观点哦！
