应用Graphics2D创建滑块验证码

使用Graphics2D创建滑块验证码

说明
源码
思路
- 主要代码
相关知识点
注意

说明

这是一个实现滑块验证码功能的Spring Boot应用示例
环境：

Spring Boot 3
JDK 17
Maven 3

相关API：Graphics2D用来给原图加凹槽，裁剪形状作为滑块。

源码

gitee: https://gitee.com/qkzztx_admin/captcha-demo.git

效果：

思路

加载原图缩放到固定大小
生成一个Shape用作凹槽和滑块的形状区域
把Shape形状的透明黑色凹槽覆盖在原图上形成背景图
放置裁剪区域，原图覆盖在滑块图片上得到滑块图。

主要代码

创建自定义的形状
这里仅仅创建了三种：圆形、拼图、矩形。
坐标都是从(0,0)开始。

/**
* 创建自定义形状
* 形状初始坐标都是0,0
*/
private static Shape createCustomShape(String shapeType) {
return switch (shapeType) {
case "circle" ->
// 圆形滑块
new java.awt.geom.Ellipse2D.Float(0, 0, BLOCK_WIDTH, BLOCK_HEIGHT);
case "puzzle" ->
// 拼图形状 - 自定义复杂形状
createPuzzleShape();
case "rectangle" ->
// 矩形带圆角
new java.awt.geom.RoundRectangle2D.Float(0, 0, BLOCK_WIDTH, BLOCK_HEIGHT, 20, 20);
default -> new java.awt.geom.Rectangle2D.Float(0, 0, BLOCK_WIDTH, BLOCK_HEIGHT);
};
}
/**
* 创建拼图形状（更复杂的形状）
*/
private static Shape createPuzzleShape() {
Area area = new Area(new Rectangle(0, 0, BLOCK_WIDTH, BLOCK_HEIGHT));
// 添加凸起和凹陷
int protrusionWidth = BLOCK_WIDTH / 4;
int protrusionHeight = BLOCK_HEIGHT / 3;
// 右侧凸起
Area rightProtrusion = new Area(new Rectangle(
BLOCK_WIDTH - protrusionWidth / 2,
BLOCK_HEIGHT / 3,
protrusionWidth,
protrusionHeight
));
area.add(rightProtrusion);
// 左侧凹陷
Area leftIndentation = new Area(new Rectangle(
-protrusionWidth / 2,
BLOCK_HEIGHT / 3,
protrusionWidth,
protrusionHeight
));
area.subtract(leftIndentation);
return area;
}

创建背景图
先绘制原图
挪到目标位置绘制黑色透明（透明度为90）的形状凹槽
添加边框便于识别

/**
* 创建带凹槽的背景图
*/
private static BufferedImage createBackgroundWithHole(BufferedImage background,
Shape shape, int x, int y) {
BufferedImage result = new BufferedImage(
background.getWidth(),
background.getHeight(),
BufferedImage.TYPE_INT_ARGB
);
Graphics2D g2d = result.createGraphics();
// 设置高质量渲染
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
// 绘制原图
g2d.drawImage(background, 0, 0, null);
int targetX = (int) (x - shape.getBounds().getWidth() / 2);
int targetY = (int) (y - shape.getBounds().getHeight() / 2);
// 创建凹槽效果
g2d.setComposite(AlphaComposite.SrcOver);
g2d.translate(targetX, targetY);
g2d.setColor(new Color(0, 0, 0, 90));
g2d.fill(shape);
g2d.translate(-targetX, -targetY);
// 添加边框效果（可选）
g2d.setComposite(AlphaComposite.SrcOver);
g2d.setColor(new Color(255, 255, 255, 100));
g2d.setStroke(new BasicStroke(2));
g2d.translate(targetX, targetY);
g2d.draw(shape);
g2d.translate(-targetX, -targetY);
g2d.dispose();
return result;
}

创建滑块图
滑块图的高度和背景图高度一样
滑块图的宽度是定义的滑块宽度60, 再加上边距。
滑块绘制的背景色是透明的。
裁剪的逻辑是把原图覆盖在滑块上，重合点是目标点，裁剪区域就是Shape。

/**
* 创建滑块图片（滑块高度与背景图一致，宽度略大于形状，确保形状位置与凹槽一致）
*/
private static BufferedImage createSliderImage(BufferedImage background,
Shape shape, int x, int y) {
// 滑块图片宽度为形状宽度 + 边距，高度与背景相同
int sliderWidth = (int) shape.getBounds().getWidth() + BLOCK_PADDING * 2;
int bgHeight = background.getHeight();
BufferedImage slider = new BufferedImage(
sliderWidth,
bgHeight,
BufferedImage.TYPE_INT_ARGB
);
Graphics2D g2d = slider.createGraphics();
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
// 设置透明背景
g2d.setComposite(AlphaComposite.Clear);
g2d.fillRect(0, 0, sliderWidth, bgHeight);
g2d.setComposite(AlphaComposite.SrcOver);
// 计算目标位置（滑块图片水平居中）
int targetX = sliderWidth / 2;
// 创建移动后的形状区域
AffineTransform transform = AffineTransform.getTranslateInstance(
targetX - shape.getBounds().getWidth() / 2,
y - shape.getBounds().getHeight() / 2
);
Shape movedShape = transform.createTransformedShape(shape);
// 设置裁剪区域为移动后的形状
g2d.setClip(movedShape);
// 绘制背景图中对应的区域
// 计算背景图需要绘制的偏移量，使得形状区域对齐
int drawX = targetX - x;
g2d.drawImage(background, drawX, 0, null);
g2d.dispose();
return slider;
}

返回值
验证的坐标点是横坐标：目标点-边距-滑块宽度一半
和前端放置滑块的位置有关
和前端放置背景图的宽度有关

private CaptchaInfo generateSliderCaptcha(BufferedImage background,
int x, int y,
String shapeType) {
// 创建形状
Shape sliderShape = createCustomShape(shapeType);
// 生成带凹槽的背景图
BufferedImage bgWithHole = createBackgroundWithHole(background, sliderShape, x, y);
// 生成滑块图片（高度与背景相同）
BufferedImage sliderImage = createSliderImage(background, sliderShape, x, y);
// 生成唯一令牌作为sessionId
String sessionId = generateSessionId();
// 保存验证码会话信息
captchaSessions.put(sessionId, new CaptchaSession((int) (x - BLOCK_PADDING - sliderShape.getBounds().getWidth() / 2), y));
log.info("生成验证码，sessionId: {}, x: {}, y: {}, shapeWidth: {}, padding: {}, sliderWidth: {}, backgroundWidth: {}",
sessionId, x, y, sliderShape.getBounds().getWidth(), BLOCK_PADDING, sliderImage.getWidth(), bgWithHole.getWidth());
// 封装验证码信息
CaptchaInfo captchaInfo = new CaptchaInfo();
captchaInfo.setBackground(imageToBase64(bgWithHole));
captchaInfo.setSlider(imageToBase64(sliderImage));
captchaInfo.setSessionId(sessionId);
return captchaInfo;
}