博客

项目结构：

SpringBoot 2.7

Vue2

不想了解的，直接跳转到 快速上手 目录

Kaptcha 是什么？

Kaptcha 是一个可高度配置的实用验证码生成工具，可自由配置的选项如：

1. 验证码的字体
2. 验证码字体的大小
3. 验证码字体的字体颜色
4. 验证码内容的范围(数字，字母，中文汉字！)
5. 验证码图片的大小，边框，边框粗细，边框颜色
6. 验证码的干扰线
7. 验证码的样式(鱼眼样式、3D、普通模糊、…)

快速上手

导入依赖

<dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
</dependency>

1 编写kapthca配置类： KaptchaConfig 类

 package com.example.demo.config;

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;

import org.springframework.stereotype.Component;

import java.util.Properties;

/**
 * @Configuration 和 @Component
 * @Configuation 的本质就是 Component
 */
@Component
public class KaptchConfig {
    @Bean
    public DefaultKaptcha getDefaultKaptcha() {
        com.google.code.kaptcha.impl.DefaultKaptcha defaultKaptcha = new com.google.code.kaptcha.impl.DefaultKaptcha();
        Properties properties = new Properties();
        // 图片边框
        properties.setProperty("kaptcha.border", "no");
        // 边框颜色
        properties.setProperty("kaptcha.border.color", "black");
        //边框厚度
        properties.setProperty("kaptcha.border.thickness", "1");
        // 图片宽
        properties.setProperty("kaptcha.image.width", "120");
        // 图片高
        properties.setProperty("kaptcha.image.height", "60");
        //图片实现类
        properties.setProperty("kaptcha.producer.impl", "com.google.code.kaptcha.impl.DefaultKaptcha");
        //文本实现类
        properties.setProperty("kaptcha.textproducer.impl", "com.google.code.kaptcha.text.impl.DefaultTextCreator");
        //文本集合，验证码值从此集合中获取
        properties.setProperty("kaptcha.textproducer.char.string", "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ");
        //验证码长度
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        //字体
        properties.setProperty("kaptcha.textproducer.font.names", "宋体");
        //字体颜色
        properties.setProperty("kaptcha.textproducer.font.color", "black");
        //文字间隔
        properties.setProperty("kaptcha.textproducer.char.space", "4");
        //干扰实现类
        properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.DefaultNoise");
        //干扰颜色
        properties.setProperty("kaptcha.noise.color", "blue");
        //干扰图片样式
        properties.setProperty("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.WaterRipple");
        //背景实现类
        properties.setProperty("kaptcha.background.impl", "com.google.code.kaptcha.impl.DefaultBackground");
        //背景颜色渐变，结束颜色
        properties.setProperty("kaptcha.background.clear.to", "white");
        //文字渲染器
        properties.setProperty("kaptcha.word.impl", "com.google.code.kaptcha.text.impl.DefaultWordRenderer");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }

}

Controller 层 ：

    @Resource
    DefaultKaptcha defaultKaptcha;
    //生成验证码
    @RequestMapping("/Code")
    public ResultVo Code() throws IOException {
        // 生成文字验证码
        String text=defaultKaptcha.createText();
        System.out.println("文字验证码为"+text);
        // 生成图片验证码
        ByteArrayOutputStream out = null;
        BufferedImage image = defaultKaptcha.createImage(text);
        out=new ByteArrayOutputStream();
        ImageIO.write(image,"jpg",out);
        // 对字节组Base64编码
        return ResultVo.success("img",Base64.getEncoder().encodeToString(out.toByteArray()));
    }

前端Vue页面：

  getCode() {
      this.axios({
        method: "post",
        url: "http://localhost:8182/Code"
      }).then(res => {
        console.log(res)
        document.getElementById("codeImg").src = 'data:image/jpeg;base64,' + res.data.data;
      })
    }