java生成随机图片验证码和验证

柔情只为你懂 2022-04-24 08:02 500阅读 0赞

先来看一下效果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1

下面来看一下代码吧!

页面部分：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>学生信息管理——登录</title>
  8. <script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
  9. <style type="text/css">
  10.     body{
  11.         background: url(static/img/login.png) no-repeat;
  12.         background-size: cover;
  13.     }
  14.     #home{
  15.         width: 20%;
  16.         height: 30%;
  17.         margin-left: 63%;
  18.         margin-top: 17%;
  19.         color: #479b9b;
  20.     }
  21.     .inp{
  22.         width: 98%;
  23.         line-height: 40px;
  24.         margin: 10px 0;
  25.         font-size: 20px;
  26.         border: none;
  27.         background: #293f54;
  28.         border: 2px solid #13c9a3;
  29.         border-radius: 30px;
  30.     }
  31.     #username, #passwrod{
  32.         text-indent: 1.5em;
  33.     }
  34.     #username{
  35.         background: url(static/img/username.png) no-repeat left;
  36.     }
  37.     #passwrod{
  38.         background: url(static/img/password.png) no-repeat left;
  39.     }
  40.     #btn{
  41.         background: #22c1a1;
  42.     }
  43.     #yzm{
  44.         width: 45%;
  45.         text-indent: 1em;
  46.     }
  47.     #btn:hover{
  48.         cursor: pointer;
  49.         background: #33FF99;
  50.         color: white;
  51.     }
  52.     #img{
  53.         float: right;
  54.         margin: 10px;
  55.     }
  56.     #img:hover {
  57.         cursor: pointer;
  58.     }
  59. </style>
  60. </head>
  61. <body>
  62.     <div id="home">
  63.         <form id="myForm" action="login" method="post">
  64.             <input type="text" value="aaa" class="inp" name = "username" id="username" />
  65.             <input type="password" value="1234" class="inp" name = "password" id="passwrod" />
  67.             <input type="text" class="inp" id="yzm" placeholder="验证码" />
  68.             <img id="img" src="getCode" onclick="changeImg()">
  70.             <div style="margin: 10px;">
  71.                 <span><input type="checkbox" id="aaa"><label for="aaa">记住我</label></span>
  72.                 <span style="float: right;">注册</span>
  73.             </div>
  75.             <button type="button" class="inp" id="btn">立即登录</button>
  76.         </form>
  77.     </div>
  79.     <script type="text/javascript">
  80.         //点击更换验证码
  81.         function changeImg() {
  82.             var imgSrc = $("#img");    
  83.             var src = imgSrc.attr("src");        
  84.             imgSrc.attr("src", chgUrl(src));
  85.         }
  87.         // 时间戳
  88.         // 为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
  89.         function chgUrl(url) {
  90.             var timestamp = (new Date()).valueOf();
  91.             url = url.substring(0, 20);
  92.             if ((url.indexOf("&") >= 0)) {
  93.                 url = url + "×tamp=" + timestamp;
  94.             } else {
  95.                 url = url + "?timestamp=" + timestamp;
  96.             }
  97.             return url;
  98.         }
  100.         //登录
  101.         $("#btn").click(function(){
  102.             var yzm = $("#yzm").val();
  103.             var username = $("#username").val();
  104.             var passwrod = $("#passwrod").val();
  105.             $.post("yz", {yzm: yzm}, function(data){
  106.                 if(data.success){
  107.                     $("#myForm").submit();
  108.                 }else{
  109.                     alert("验证码输入错误！")
  110.                 }
  111.             })
  112.         })
  113.         //监听回车事件
  114.         $('#myForm').bind('keyup', function(event) {
  115.             if (event.keyCode == "13") {
  116.                 $('#btn').click();
  117.             }
  118.         });
  120.     </script>
  121. </body>
  122. </html>

生成验证码和验证码图片的工具类CodeUtil.java

  1. import java.awt.Color;
  2. import java.awt.Font;
  3. import java.awt.Graphics;
  4. import java.awt.image.BufferedImage;
  5. import java.awt.image.RenderedImage;
  6. import java.io.FileOutputStream;
  7. import java.io.OutputStream;
  8. import java.util.HashMap;
  9. import java.util.Map;
  10. import java.util.Random;
  12. import javax.imageio.ImageIO;
  14. public class CodeUtil {
  15.     private static int width = 120;// 定义图片的width
  16.     private static int height = 45;// 定义图片的height
  17.     private static int codeCount = 4;// 定义图片上显示验证码的个数
  18.     private static int xx = 22;
  19.     private static int fontHeight = 35;
  20.     private static  int codeY =35;
  21.     private static char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
  22.             'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 
  23.             'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r',
  24.             's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 
  25.             '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };
  27.     /**
  28.      * 生成一个map集合
  29.      * code为生成的验证码
  30.      * codePic为生成的验证码BufferedImage对象
  31.      * @return
  32.      */
  33.     public static Map<String,Object> generateCodeAndPic() {
  34.         // 定义图像buffer
  35.         BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
  36.         Graphics gd = buffImg.getGraphics();
  37.         // 创建一个随机数生成器类
  38.         Random random = new Random();
  39.         // 将图像填充为白色
  40.         gd.setColor(Color.WHITE);
  41.         gd.fillRect(0, 0, width, height);
  43.         // 创建字体，字体的大小应该根据图片的高度来定。
  44.         Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
  45.         // 设置字体。
  46.         gd.setFont(font);
  48.         // 画边框。
  49.         gd.setColor(Color.BLACK);
  50.         gd.drawRect(0, 0, width - 1, height - 1);
  52.         // 随机产生50条干扰线，使图象中的认证码不易被其它程序探测到。
  53.         gd.setColor(Color.BLACK);
  54.         for (int i = 0; i < 50; i++) {
  55.             int x = random.nextInt(width);
  56.             int y = random.nextInt(height);
  57.             int xl = random.nextInt(12);
  58.             int yl = random.nextInt(12);
  59.             gd.drawLine(x, y, x + xl, y + yl);
  60.         }
  62.         // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
  63.         StringBuffer randomCode = new StringBuffer();
  64.         int red = 0, green = 0, blue = 0;
  66.         // 随机产生codeCount数字的验证码。
  67.         for (int i = 0; i < codeCount; i++) {
  68.             // 得到随机产生的验证码数字。
  69.             String code = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
  70.             // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。
  71.             red = random.nextInt(255);
  72.             green = random.nextInt(255);
  73.             blue = random.nextInt(255);
  75.             // 用随机产生的颜色将验证码绘制到图像中。
  76.             gd.setColor(new Color(red, green, blue));
  77.             gd.drawString(code, (i + 1) * xx, codeY);
  79.             // 将产生的四个随机数组合在一起。
  80.             randomCode.append(code);
  81.         }
  82.         Map<String,Object> map  =new HashMap<String,Object>();
  83.         //存放验证码
  84.         map.put("code", randomCode);
  85.         //存放生成的验证码BufferedImage对象
  86.         map.put("codePic", buffImg);
  87.         return map;
  88.     }
  90.     //测试
  91.     public static void main(String[] args) throws Exception {
  92.         //创建文件输出流对象
  93.         OutputStream out = new FileOutputStream("D://img/"+System.currentTimeMillis()+".jpg");
  94.         Map<String,Object> map = CodeUtil.generateCodeAndPic();
  95.         ImageIO.write((RenderedImage) map.get("codePic"), "jpeg", out);
  96.         System.out.println("验证码的值为："+map.get("code"));
  97.     }
  99. }

后台生成验证和效验代码

  1. /**
  2.  * 生成验证码
  3.  * @param req
  4.  * @param resp
  5.  */
  6. @RequestMapping(value="/getCode")
  7. @ResponseBody
  8. public void getCode(HttpServletRequest req, HttpServletResponse resp) {
  9.      // 调用工具类生成的验证码和验证码图片
  10.     Map<String, Object> codeMap = CodeUtil.generateCodeAndPic();
  12.     // 将四位数字的验证码保存到Session中。
  13.     HttpSession session = req.getSession();
  14.     session.setAttribute("code", codeMap.get("code").toString());
  16.     // 禁止图像缓存。
  17.     resp.setHeader("Pragma", "no-cache");
  18.     resp.setHeader("Cache-Control", "no-cache");
  19.     resp.setDateHeader("Expires", -1);
  21.     resp.setContentType("image/jpeg");
  23.     // 将图像输出到Servlet输出流中。
  24.     ServletOutputStream sos;
  25.     try {
  26.         sos = resp.getOutputStream();
  27.         ImageIO.write((RenderedImage) codeMap.get("codePic"), "jpeg", sos);
  28.         sos.close();
  29.     } catch (IOException e) {
  30.         e.printStackTrace();
  31.     }
  32. }
  34. /**
  35.  * 验证验证输入是否正确
  36.  * @param yzm
  37.  * @param request
  38.  * @return
  39.  */
  40. @RequestMapping(value="/yz")
  41. @ResponseBody
  42. public Object yz(String yzm, HttpServletRequest request) {
  43.     //字符串全部转为小写
  44.     yzm = yzm.toLowerCase();
  45.     String yzm1 = request.getSession().getAttribute("code").toString().toLowerCase();
  46.     if(yzm.equals(yzm1)) {
  47.         return new AjaxResult("ok");
  48.     }else {
  49.         return new AjaxResult(false, "no");
  50.     }
  51. }

发表评论

表情：
评论列表 （有 0 条评论，500人围观）

还没有评论，来说两句吧...

相关阅读