验证码图片功能 简单实现

 前言

登录页面图片验证码功能简单实现

---

Service层：

方法参数是为了存储code值🍁

    /**
     * 返回值为BufferedImage对象
     * @param session  存储code值
     * @return
     */
    BufferedImage getImage(HttpSession session);

ServiceImpl层:

   getImage(HttpSession session)方法 生成验证码图片🧅

/**
     * 返回值为BufferedImage对象
     * @param session  存储code值
     * @return
     */
    @Override
    public BufferedImage getImage(HttpSession session) {
        //创建空白图片
        BufferedImage bufferedImage = new BufferedImage(70,40, BufferedImage.TYPE_INT_RGB);
        //获取图片画笔
        Graphics g = bufferedImage.getGraphics();
        //绘制矩形边框   rectangle：矩形
        g.drawRect(0,0,70,40);

        //设置背景颜色
        g.setColor(Color.cyan);
        //填充背景色
        g.fillRect(0,0,70,40);

        Font font=new Font( "Agency FB",Font.BOLD,24);
        //获取随机验证码
        String ss="qwertyuiopasdfghjklzxcvbnm7894561230";
        Random random = new Random();
        StringBuilder sb = new StringBuilder();
        for (int i=0;i<4;i++){
            
            int index = random.nextInt(ss.length());
            char c = ss.charAt(index);
            sb.append(c);

            //设置倾斜角度范围
            int angle = random.nextInt(20);
            //向左或者右倾斜
            angle = (random.nextBoolean() == true) ? angle : -angle;
            AffineTransform affineTransform = new AffineTransform();
            affineTransform.rotate(Math.toRadians(angle), 0, 0);
            font = font.deriveFont(affineTransform);

            //设置画笔字体
            g.setFont(font);
            //设置字体颜色
            g.setColor(Color.black);
            //写入字体
            int x=8+i*14;
            int y=random.nextInt(6)+28;
            g.drawString(""+c,x,y);
        }

        //存入session
        String code=sb.toString();
        session.setAttribute("code",code);


        //设置干扰线
        g.setColor(Color.pink);
        for(int i = 0;i <12;i++)
        {
            int x1=random.nextInt(100);
            int y1=random.nextInt(60);
            int x2=random.nextInt(100);
            int y2=random.nextInt(60);
            g.drawLine(x1,y1,x2,y2);
        }

        //返回BufferedImage对象
        return bufferedImage;
    }

Controller层：

获取bufferedImage，打印验证码图片🎰

@GetMapping(value = "/image")
    private void getImage(HttpServletResponse response,HttpSession session){
        //设置图片类型
        response.setContentType("image/png");

        //调用业务层getImage方法，获取image
        BufferedImage image = userService.getImage(session);

        try {
            //直接打印
            ImageIO.write(image,"png",response.getOutputStream());
            //打印到指定路径
            // ImageIO.write(image,"png",new FileOutputStream(".\\src\\main\\resources\\static\\img\\verification.png"));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

前端页面：

点击验证码图片刷新。

获取DOM节点，设置src。(src后面加上随机不重复值，避免缓存，图片刷新无效)

//刷新验证码图片
getVerification(){ 

    let verification=document.querySelector(".img");

    verification.src="/User/image?"+`${new Date().getMilliseconds()}`;

}

 验证码样式（可自调）：