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

柔情只为你懂 2022-04-24 08:02 331阅读 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][]

下面来看一下代码吧!

页面部分：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>学生信息管理——登录</title>
    <script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
    <style type="text/css">
    	body{
    		background: url(static/img/login.png) no-repeat;
    		background-size: cover;
    	}
    	#home{
    		width: 20%;
    		height: 30%;
    		margin-left: 63%;
    		margin-top: 17%;
    		color: #479b9b;
    	}
    	.inp{
    		width: 98%;
    		line-height: 40px;
    		margin: 10px 0;
    		font-size: 20px;
    		border: none;
    		background: #293f54;
    		border: 2px solid #13c9a3;
    		border-radius: 30px;
    	}
    	#username, #passwrod{
    		text-indent: 1.5em;
    	}
    	#username{
    		background: url(static/img/username.png) no-repeat left;
    	}
    	#passwrod{
    		background: url(static/img/password.png) no-repeat left;
    	}
    	#btn{
    		background: #22c1a1;
    	}
    	#yzm{
    		width: 45%;
    		text-indent: 1em;
    	}
    	#btn:hover{
    		cursor: pointer;
    		background: #33FF99;
    		color: white;
    	}
    	#img{
    	    float: right;
    	    margin: 10px;
    	}
    	#img:hover {
    		cursor: pointer;
    	}
    </style>
    </head>
    <body>
    	<div id="home">
    		<form id="myForm" action="login" method="post">
    			<input type="text" value="aaa" class="inp" name = "username" id="username" />
    			<input type="password" value="1234" class="inp" name = "password" id="passwrod" />
    			
    			<input type="text" class="inp" id="yzm" placeholder="验证码" />
    			<img id="img" src="getCode" onclick="changeImg()">
    			
    			<div style="margin: 10px;">
    				<span><input type="checkbox" id="aaa"><label for="aaa">记住我</label></span>
    				<span style="float: right;">注册</span>
    			</div>
    			
    			<button type="button" class="inp" id="btn">立即登录</button>
    		</form>
    	</div>
    	
    	<script type="text/javascript">
    		//点击更换验证码
    	    function changeImg() {
    	        var imgSrc = $("#img");    
    	        var src = imgSrc.attr("src");        
    	        imgSrc.attr("src", chgUrl(src));
    	    }
    	    
    	    // 时间戳
    	    // 为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
    	    function chgUrl(url) {
    	        var timestamp = (new Date()).valueOf();
    	        url = url.substring(0, 20);
    	        if ((url.indexOf("&") >= 0)) {
    	            url = url + "×tamp=" + timestamp;
    	        } else {
    	            url = url + "?timestamp=" + timestamp;
    	        }
    	        return url;
    	    }
    	    
    	    //登录
    	    $("#btn").click(function(){
    	    	var yzm = $("#yzm").val();
    	    	var username = $("#username").val();
    	    	var passwrod = $("#passwrod").val();
    	    	$.post("yz", {yzm: yzm}, function(data){
    	    		if(data.success){
    	    			$("#myForm").submit();
    	    		}else{
    	    			alert("验证码输入错误！")
    	    		}
    	    	})
    	    })
    	    //监听回车事件
    	    $('#myForm').bind('keyup', function(event) {
    	        if (event.keyCode == "13") {
    	            $('#btn').click();
    	        }
    	    });
    	    
    	</script>
    </body>
    </html>

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

import java.awt.Color;
    import java.awt.Font;
    import java.awt.Graphics;
    import java.awt.image.BufferedImage;
    import java.awt.image.RenderedImage;
    import java.io.FileOutputStream;
    import java.io.OutputStream;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.Random;
    
    import javax.imageio.ImageIO;
    
    public class CodeUtil {
        private static int width = 120;// 定义图片的width
        private static int height = 45;// 定义图片的height
        private static int codeCount = 4;// 定义图片上显示验证码的个数
        private static int xx = 22;
        private static int fontHeight = 35;
        private static  int codeY =35;
        private static char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
                'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 
                'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r',
                's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 
                '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };
        
        /**
         * 生成一个map集合
         * code为生成的验证码
         * codePic为生成的验证码BufferedImage对象
         * @return
         */
        public static Map<String,Object> generateCodeAndPic() {
            // 定义图像buffer
            BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            Graphics gd = buffImg.getGraphics();
            // 创建一个随机数生成器类
            Random random = new Random();
            // 将图像填充为白色
            gd.setColor(Color.WHITE);
            gd.fillRect(0, 0, width, height);
    
            // 创建字体，字体的大小应该根据图片的高度来定。
            Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
            // 设置字体。
            gd.setFont(font);
    
            // 画边框。
            gd.setColor(Color.BLACK);
            gd.drawRect(0, 0, width - 1, height - 1);
    
            // 随机产生50条干扰线，使图象中的认证码不易被其它程序探测到。
            gd.setColor(Color.BLACK);
            for (int i = 0; i < 50; i++) {
                int x = random.nextInt(width);
                int y = random.nextInt(height);
                int xl = random.nextInt(12);
                int yl = random.nextInt(12);
                gd.drawLine(x, y, x + xl, y + yl);
            }
    
            // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
            StringBuffer randomCode = new StringBuffer();
            int red = 0, green = 0, blue = 0;
    
            // 随机产生codeCount数字的验证码。
            for (int i = 0; i < codeCount; i++) {
                // 得到随机产生的验证码数字。
                String code = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
                // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。
                red = random.nextInt(255);
                green = random.nextInt(255);
                blue = random.nextInt(255);
    
                // 用随机产生的颜色将验证码绘制到图像中。
                gd.setColor(new Color(red, green, blue));
                gd.drawString(code, (i + 1) * xx, codeY);
    
                // 将产生的四个随机数组合在一起。
                randomCode.append(code);
            }
            Map<String,Object> map  =new HashMap<String,Object>();
            //存放验证码
            map.put("code", randomCode);
            //存放生成的验证码BufferedImage对象
            map.put("codePic", buffImg);
            return map;
        }
    
        //测试
        public static void main(String[] args) throws Exception {
            //创建文件输出流对象
            OutputStream out = new FileOutputStream("D://img/"+System.currentTimeMillis()+".jpg");
            Map<String,Object> map = CodeUtil.generateCodeAndPic();
            ImageIO.write((RenderedImage) map.get("codePic"), "jpeg", out);
            System.out.println("验证码的值为："+map.get("code"));
    	}
    
    }

后台生成验证和效验代码

/**
     * 生成验证码
     * @param req
     * @param resp
     */
    @RequestMapping(value="/getCode")
    @ResponseBody
    public void getCode(HttpServletRequest req, HttpServletResponse resp) {
    	 // 调用工具类生成的验证码和验证码图片
        Map<String, Object> codeMap = CodeUtil.generateCodeAndPic();
    
        // 将四位数字的验证码保存到Session中。
        HttpSession session = req.getSession();
        session.setAttribute("code", codeMap.get("code").toString());
    
        // 禁止图像缓存。
        resp.setHeader("Pragma", "no-cache");
        resp.setHeader("Cache-Control", "no-cache");
        resp.setDateHeader("Expires", -1);
    
        resp.setContentType("image/jpeg");
    
        // 将图像输出到Servlet输出流中。
        ServletOutputStream sos;
        try {
            sos = resp.getOutputStream();
            ImageIO.write((RenderedImage) codeMap.get("codePic"), "jpeg", sos);
            sos.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    /**
     * 验证验证输入是否正确
     * @param yzm
     * @param request
     * @return
     */
    @RequestMapping(value="/yz")
    @ResponseBody
    public Object yz(String yzm, HttpServletRequest request) {
    	//字符串全部转为小写
    	yzm = yzm.toLowerCase();
    	String yzm1 = request.getSession().getAttribute("code").toString().toLowerCase();
    	if(yzm.equals(yzm1)) {
    		return new AjaxResult("ok");
    	}else {
    		return new AjaxResult(false, "no");
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: /images/20220217/50f1c89b98954a8b87f0cad7d022468d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: /images/20220217/f86160e4f25d49838beb79d4227869a7.png