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