java 图片滑动验证码_java实现图片滑动验证(包含前端代码)
前言
1、下面是一个效果展示；
2、先抱怨一下，在博客上面的抄袭真的非常严重，为了实现一个图片滑动验证，我搜索了挺久的资料，不过内容翻来覆去就是同样的内容，千篇一律，作者还各不相同；内容相同我就不多说了，毕竟能解决问题就行，然而恰恰相反，这些东西都没有为我实质性地解决问题。可能图片验证是一个需要前后台同时交互的功能吧，从业的人员大部分都是偏向后台或者偏向前台的，所以写出来的博客都不能完整阐述整个流程，下面是我自己实践完成的内容，记录一下，供各位参阅斧正。
注：由于使用到的控件和工具较多，有许多地方做了省略，这里只做核心流程的记录。
一、后端图片裁剪与生成
首先是一个图片处理工具VerifyImageUtil.class，它主要的作用是生成两张图片：一张被扣除了一部分的原始图片；一张抠出来图片。两两结合，可以组成一张完整的图片。原始图片(target目录)提供了20张，规格都是590*360的；抠图需要的模板图(template目录)有4张，规格都是93*360的(图片等各种资源会在文末给出)。将图片资源导入到我们项目的静态资源路径下(你也可以通过其他方式存储它们)，我这边是Spring Boot的项目，所以就放在resource下的static目录下了：
下面是 VerifyImageUtil.class
package com.mine.risk.util;
import org.apache.commons.lang.StringUtils;
import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.text.NumberFormat;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Random;
/**
* 滑块验证工具类
* @author : spirit
* @date : Created in 10:57 2019/9/05
*/
public class VerifyImageUtil {
/** 源文件宽度 */
private static final int ORI_WIDTH = 590;
/** 源文件高度 */
private static final int ORI_HEIGHT = 360;
/** 抠图坐标x */
private static int X;
/** 抠图坐标y */
private static int Y;
/** 模板图宽度 */
private static int WIDTH;
/** 模板图高度 */
private static int HEIGHT;
public static int getX() {
return X;
}
public static int getY() {
return Y;
}
/**
* 根据模板切图
* @param templateFile 模板文件
* @param targetFile 目标文件
* @param templateType 模板文件类型
* @param targetType 目标文件类型
* @return 切图map集合
* @throws Exception 异常
*/
public static Map pictureTemplatesCut(File templateFile, File targetFile, String templateType, String targetType) throws Exception {
Map pictureMap = new HashMap<>(2);
if (StringUtils.isEmpty(templateType) || StringUtils.isEmpty(targetType)) {
throw new RuntimeException("file type is empty");
}
InputStream targetIs = new FileInputStream(targetFile);
// 模板图
BufferedImage imageTemplate = ImageIO.read(templateFile);
WIDTH = imageTemplate.getWidth();
HEIGHT = imageTemplate.getHeight();
// 随机生成抠图坐标
generateCutoutCoordinates();
// 最终图像
BufferedImage newImage = new BufferedImage(WIDTH, HEIGHT, imageTemplate.getType());
Graphics2D graphics