Kaptcha 使用教程

项目结构：
SpringBoot 2.7
Vue2
不想了解的，直接跳转到快速上手目录

Kaptcha 是什么？

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

验证码的字体
验证码字体的大小
验证码字体的字体颜色
验证码内容的范围(数字，字母，中文汉字！)
验证码图片的大小，边框，边框粗细，边框颜色
验证码的干扰线
验证码的样式(鱼眼样式、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 {@Beanpublic 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 层：

    @ResourceDefaultKaptcha 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;})}