Java实现拖拉/滑动图片验证码

环境条件

JDK1.8
MAVEN-3.3
spring-boot-2.1.17.RELEASE
Redis

源码+DEMO+单元测试下载地址（有问题可关注并私信博主解决）

https://download.csdn.net/download/m0_38138879/19386954

用户行为验证码（拖动图片）

实现思路

1.一个文件夹存储大小一致的背景图；另外一个文件存储高度跟背景图一致，但是宽度不一致的拖动图（需要UI将空白位置设置为透明）;上述两文件夹支持可配置路径和容错的默认路径.

2.项目启动完成时一次性全部背景图和拖动图转为字节或Base64缓存起来(可改为redis)；前端请求图片验证码时候在随机取缓存中的一张背景图片和一张拖动图。

private void cacheBackgroundImage(){if(StrUtil.isNotBlank(config.getBackgroundImagePath())&& FileUtil.isDirectory(config.getBackgroundImagePath())){log.info("开始加载文件路径为:{}的拖拉验证码背景图..",config.getBackgroundImagePath());for(File file :FileUtil.loopFiles(config.getBackgroundImagePath())){if(file.isDirectory()){continue;}BASE64_BACKGROUND_IMAGE.put(file.getName(), Base64.encode(file));}log.info("完成加载文件路径为:{}的拖拉验证码背景图..",config.getBackgroundImagePath());}//加载默认的背景图if(BASE64_BACKGROUND_IMAGE.isEmpty()){log.info("开始加载默认路径为:defaultImage/background/的5张拖拉验证码背景图..");BASE64_BACKGROUND_IMAGE.put("1.jpg",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/background/1.jpg"),true)));BASE64_BACKGROUND_IMAGE.put("2.jpg",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/background/2.jpg"),true)));BASE64_BACKGROUND_IMAGE.put("3.jpg",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/background/3.jpg"),true)));BASE64_BACKGROUND_IMAGE.put("4.jpg",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/background/4.jpg"),true)));BASE64_BACKGROUND_IMAGE.put("5.jpg",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/background/5.jpg"),true)));log.info("完成加载默认路径为:defaultImage/background/的5张拖拉验证码背景图..");}}private void cacheDraggedImage(){if(StrUtil.isNotBlank(config.getDraggedImagePath()) && FileUtil.isDirectory(config.getDraggedImagePath())){log.info("开始加载文件路径为:{}的拖拉验证码拼图..",config.getDraggedImagePath());for(File file :FileUtil.loopFiles(config.getDraggedImagePath())){if(file.isDirectory()){continue;}BASE64_DRAGGED_IMAGE.put(file.getName(), Base64.encode(file));}log.info("完成加载文件路径为:{}的拖拉验证码拼图..",config.getDraggedImagePath());}//加载默认的拼图if(BASE64_DRAGGED_IMAGE.isEmpty()){log.info("开始加载默认路径为:defaultImage/dragged/的11张拖拉验证码拼图..");BASE64_DRAGGED_IMAGE.put("1.png",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/1.png"),true)));BASE64_DRAGGED_IMAGE.put("2.png",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/2.png"),true)));BASE64_DRAGGED_IMAGE.put("3.png",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/3.png"),true)));BASE64_DRAGGED_IMAGE.put("4.png",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/4.png"),true)));BASE64_DRAGGED_IMAGE.put("5.png",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/5.png"),true)));BASE64_DRAGGED_IMAGE.put("6.png",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/6.png"),true)));BASE64_DRAGGED_IMAGE.put("7.png",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/7.png"),true)));BASE64_DRAGGED_IMAGE.put("8.png",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/8.png"),true)));BASE64_DRAGGED_IMAGE.put("9.png",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/9.png"),true)));BASE64_DRAGGED_IMAGE.put("10.png",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/10.png"),true)));BASE64_DRAGGED_IMAGE.put("11.png",Base64.encode(IoUtil.readBytes(ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/11.png"),true)));log.info("完成加载默认路径为:defaultImage/dragged/的11张拖拉验证码拼图..");}}

3.以拖动图大少新建一张背景为透明的拖动图，以背景图的宽度和拖拉图宽度为基础随机生成一个背景图的抠图X1开始坐标。循环拖拉图的每个像素，如果这个坐标X:Y为非透明的RGB，采集背景X1+X：Y的RGB并设置到新建的拖拉图，在设置背景图 X1+1:Y坐标的RGB为黑色(也可用高斯模糊算法去模糊)。将已抠图的背景图和新建的拖动图BASE64返回前端+额外一个令牌；且用Redis以令牌为key对该随机开始抠图的坐标X1存储和根据配置设置过期时间（默认3分钟，为图片验证码的有效期）

int pointX = createPointX(backgroundImageWidth,draggedImageWidth,backgroundImageHeight,draggedImageHeight);
for(int i=0;i<draggedImageWidth;i++){for (int j=0;j<draggedImageHeight;j++){int rgb = draggedImageTemplate.getRGB(i,j);if(rgb <0){//非透明int backgroundRGB = backgroundImage.getRGB(pointX+i,j);draggedImage.setRGB(i,j,backgroundRGB);backgroundImage.setRGB(pointX+i,j,Color.DARK_GRAY.getRGB());}}
}

4.前端利用后端返回的背景图和拖动图，实现拖动事件；就是鼠标按下、移动、松开；当鼠标松开时候记录对于背景图滑动的坐标X。并将坐标X（建议加密）和3步骤返回的令牌发给后端；后端检查该图片验证码是否过期、对比用户拖动的X坐标和redis记录的X坐标是否在重合,容许5尺寸的偏差。

技术核心要点

JAVA需熟悉AWT的BufferedImage、Graphics2D、Font；Redis。
前端实现拖动事件和拖动的X坐标.
坐标信息传输用AES或DES进行加密。

demo截图

输入账号、密码点击登录，弹出拖动验证码窗口
拖动都背景图缺少位置
如果未拖动到缺少位置的5尺寸差内，提示验证码错误并前端自动刷新拖拉图片验证码