提示:以下内容仅供参考
前言
提示:这里可以添加本文要记录的大概内容:
Kaptcha是谷歌提供的验证码生成工具
提示:以下是本篇文章正文内容,下面案例可供参考
一、Kaptcha是什么?
1.Kaptcha是谷歌开源的可高度配置的实用验证码生成工具。
2.通过Kaptcha可阻拦大多数机器人脚本操作。
3.kaptcha典型殷勇于注册、登录、重要信息提交等用户交互
二、使用步骤
1.引入库
代码如下(示例):
<!--谷歌验证码kaptcha 依赖-->
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
2.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;
/**
* Created with IntelliJ IDEA.
*
* @Author: 你的名字
* @Date: 2023/01/08/12:48
* @Description:
*/
@Component
public class KaptchaConfig {
@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;
}
}
3.测试生成验证码
代码如下:
@Autowired
private DefaultKaptcha defaultKaptcha;
/**
* 获取验证码
*/
@Test
public void captcha() 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()));
System.out.println(Base64.getEncoder().encodeToString(out.toByteArray()));
}
打印结果:
文字验证码为F8N9
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
将base64编码 拿到前端展示,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<h1>我的第一个HTML页面</h1>
<p>我的第一个段落。</p>
<img src="data:image/jpg;base64,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
" />
</body>
</html>
注意base64书写方式:
base64数据是不能直接使用在src上的
例子:
data:image/png;base64,base64数据 ,这样拼接才能达到base64在src上使用的效果,下面讲解参数使用方法
1: data:数据名称
2: image/gif 图片类型
image/png 图片类型
image/jpeg 图片类型
image/x-icon 图标类型
3: base64 这个是数据格式格式
文字参数介绍
方法一:
<img :src=`数据名称:图片类型;数据格式,一般为后台返回的base64数据`>
方法二:
<img :src="'数据名称:图片类型;数据格式,'+后台返回的base64数据"
代码演示
方法一:
<img :src=`data:image/png;base64,base64数据` alt="">
方法二:
<img :src="'data:image/png;base64,'+base64数据" />
验证码效果图展示: