Based on spring mvc picture verification code, it is divided into background code and front-end page display and verification of verification code.

First look at the background implementation code:

@RequestMapping({"authCode"})
    public void getAuthCode(HttpServletRequest request, HttpServletResponse response,HttpSession session)            throws IOException {
        int width = 63;
        int height = 37;
        Random random = new Random();
        //Set the response header information
        // disable caching
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);

        //Generate buffer image class
        BufferedImage image = new BufferedImage(width, height, 1);
        //Generate the Graphics of the image class for drawing operations
        Graphics g = image.getGraphics();
        //Style of the Graphics class
        g.setColor(this.getRandColor(200, 250));
        g.setFont(new Font("Times New Roman",0,28));
        g.fillRect(0, 0, width, height);
        // draw interference lines
        for(int i=0;i<40;i++){
            g.setColor(this.getRandColor(130, 200));
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int x1 = random.nextInt(12);
            int y1 = random.nextInt(12);
            g.drawLine(x, y, x + x1, y + y1);
        }

        // draw characters
        String strCode = "";
        for(int i=0;i<4;i++){
            String rand = String.valueOf(random.nextInt(10));
            strCode = strCode + rand;
            g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
            g.drawString(rand, 13*i+6, 28);
        }
        //Save the characters to the session for front-end validation
        session.setAttribute("strCode", strCode);
        g.dispose();

        ImageIO.write(image, "JPEG", response.getOutputStream());
        response.getOutputStream().flush();

    }

Create a method to generate colors

//create color
    Color getRandColor(int fc,int bc){
        Random random = new Random();
        if(fc>255)
            fc = 255;
        if(bc>255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r,g,b);
    }

front-end code

<form action="toLogin.do" id="loginUser" method="post">
    <div class="form-group">
        姓名：<input id="name" name="name" type="text"/>
    </div>
    <div class="form-group">
        密码：<input id="password" name="password" type="password"/>
    </div>
    <div class="form-group">
        验证码：<input id="authCode" name="authCode" type="text"/>
        <!--The value of the src attribute of the img tag here is the request address to implement the image verification code method in the background-->
        <label><img type="image" src="authCode.do" id="codeImage" onclick="chageCode()" title="Can't see the picture? Click to get the verification code again" style="cursor:pointer; "/></label>
        <label><a onclick="chageCode()">换一张</a></label>
    </div>
    <input type="button" class="btn btn-default"  onclick="subm()" value="登录"/>
</form>

Realize the js method of clicking the picture to replace the verification code

function chageCode(){
        $('#codeImage').attr('src','authCode.do?abc='+Math.random());//Add Math.random after the link to ensure that a new verification code is generated every time to avoid caching question.
    }