java验证码图片滑动验证码_图片滑动验证码的生成

使用Java生成图片滑动验证码

image.png

目前接到了一个新的小需求，要在登录时进行滑动图片验证。

搜了一下网上的demo，没有太多很完整的demo。就参考各种文档自己拼凑了一个出来。整理一下，以便后续使用。

核心流程分析.

服务端随机生成滑块图片和带滑块抠图的背景图片，并保存滑块抠图的坐标位置，并对应一个唯一token。

服务端将生成的唯一token与抠图的Y轴坐标，以及抠图和被扣以后的原图返回给前端，供前端进行展示。

前端实现滑动交互，将抠图拼在抠图阴影之上，获取到用户滑动轨迹。

前端将滑动轨迹上报到服务端，服务端匹配是否与抠图坐标在允许的误差范围(这里单纯校验用户滑动距离是最基本的校验，出于更高的安全考虑，还会考虑用户滑动的整个轨迹，用户在当前页面的访问行为等。这些可以很复杂，甚至借助到用户行为数据分析模型，最终的目标都是增加非法的模拟和绕过的难度。本项目中仅考虑业务场景的实现，未进行风控过滤)

滑动验证通过后，返回给前端成功结果，或者按照正常流程继续进行，例如发送短信验证码、成功登录等操作。

以下代码主要呈现的是如何生成抠图及对抠图后图片进行处理的过程。

准备内容：

1、多张尺寸固定的图片，例如300×150。

2、确定好截取的尺寸，例如50×50。

以下是代码核心部分：

import cn.welkin.entity.VerifyImage;

import sun.misc.BASE64Decoder;

import sun.misc.BASE64Encoder;

import javax.imageio.ImageIO;

import java.awt.*;

import java.awt.image.BufferedImage;

import java.io.*;

import java.util.ArrayList;

import java.util.List;

import java.util.Random;

/**

* @Author WelKin

* @ClassName VerifyImageUtil

* @Description: TODO

* @Date 2019/06/13 10:26

* @Version 1.0

**/

public class VerifyImageUtil {

/**

* 源文件宽度

*/

private static int ORI_WIDTH = 300;

/**

* 源文件高度

*/

private static int ORI_HEIGHT = 150;

/**

* 模板图宽度

*/

private static int CUT_WIDTH = 50;

/**

* 模板图高度

*/

private static int CUT_HEIGHT = 50;

/**

* 抠图凸起圆心

*/

private static int circleR = 5;

/**

* 抠图内部矩形填充大小

*/

private static int RECTANGLE_PADDING = 8;

/**

* 抠图的边框宽度

*/

private static int SLIDER_IMG_OUT_PADDING = 1;

/**

* 根据传入的路径生成指定验证码图片

*

* @param filePath

* @return

* @throws IOException

*/

public static VerifyImage getVerifyImage(String filePath) throws IOException {

BufferedImage srcImage = ImageIO.read(new File(filePath));

int locationX = CUT_WIDTH + new Random().nextInt(srcImage.getWidth() - CUT_WIDTH * 3);

int locationY = CUT_HEIGHT + new Random().nextInt(srcImage.getHeight() - CUT_HEIGHT) / 2;

BufferedImage markImage = new BufferedImage(CUT_WIDTH,CUT_HEIGHT,BufferedImage.TYPE_4BYTE_ABGR);

int[][] data = getBlockData();

cutImgByTemplate(srcImage, markImage, data, locationX, locationY);

return new VerifyImage(getImageBASE64(srcImage),getImageBASE64(markImage),locationX,locationY);

}

/**

* 生成随机滑块形状

*

* 0 透明像素

* 1 滑块像素

* 2 阴影像素

* @return int[][]

*/

private static int[][] getBlockData() {

int[][] data = new int[CUT_WIDTH][CUT_HEIGHT];

Random random = new Random();

//(x-a)²+(y-b)²=r²

//x中心位置左右5像素随机

double x1 = RECTANGLE_PADDING + (CUT_WIDTH - 2 * RECTANGLE_PADDING) / 2.0 - 5 + random.nextInt(10);

//y 矩形上边界半径-1像素移动

double y1_top = RECTANGLE_PADDING - random.nextInt(3);

double y1_bottom = CUT_HEIGHT - RECTANGLE_PADDING + random.nextInt(3);

double y1 = random.nextInt(2) == 1 ? y1_top : y1_bottom;

double x2_right = CUT_WIDTH - RECTANGLE_PADDING - circleR + random.nextInt(2 * circleR - 4);

double x2_left = RECTANGLE_PADDING + circleR - 2 - random.nextInt(2 * circleR - 4);

double x2 = random.nextInt(2) == 1 ? x2_right : x2_left;

double y2 = RECTANGLE_PADDING + (CUT_HEIGHT - 2 * RECTANGLE_PADDING) / 2.0 - 4 + random.nextInt(10);

double po = Math.pow(circleR, 2);

for (int i = 0; i < CUT_WIDTH; i++) {

for (int j = 0; j < CUT_HEIGHT; j++) {

//矩形区域

boolean fill;

if ((i >= RECTANGLE_PADDING && i < CUT_WIDTH - RECTANGLE_PADDING)

&& (j >= RECTANGLE_PADDING && j < CUT_HEIGHT - RECTANGLE_PADDING)) {

data[i][j] = 1;

fill = true;

} else {

data[i][j] = 0;

fill = false;

}

//凸出区域

double d3 = Math.pow(i - x1, 2) + Math.pow(j - y1, 2);

if (d3 < po) {

data[i][j] = 1;

} else {

if (!fill) {

data[i][j] = 0;

}

}

//凹进区域

double d4 = Math.pow(i - x2, 2) + Math.pow(j - y2, 2);

if (d4 < po) {

data[i][j] = 0;

}

}

}

//边界阴影

for (int i = 0; i < CUT_WIDTH; i++) {

for (int j = 0; j < CUT_HEIGHT; j++) {

//四个正方形边角处理

for (int k = 1; k <= SLIDER_IMG_OUT_PADDING; k++) {

//左上、右上

if (i >= RECTANGLE_PADDING - k && i < RECTANGLE_PADDING

&& ((j >= RECTANGLE_PADDING - k && j < RECTANGLE_PADDING)

|| (j >= CUT_HEIGHT - RECTANGLE_PADDING - k && j < CUT_HEIGHT - RECTANGLE_PADDING +1))) {

data[i][j] = 2;

}

//左下、右下

if (i >= CUT_WIDTH - RECTANGLE_PADDING + k - 1 && i < CUT_WIDTH - RECTANGLE_PADDING + 1) {

for (int n = 1; n <= SLIDER_IMG_OUT_PADDING; n++) {

if (((j >= RECTANGLE_PADDING - n && j < RECTANGLE_PADDING)

|| (j >= CUT_HEIGHT - RECTANGLE_PADDING - n && j <= CUT_HEIGHT - RECTANGLE_PADDING ))) {

data[i][j] = 2;

}

}

}

}

if (data[i][j] == 1 && j - SLIDER_IMG_OUT_PADDING > 0 && data[i][j - SLIDER_IMG_OUT_PADDING] == 0) {

data[i][j - SLIDER_IMG_OUT_PADDING] = 2;

}

if (data[i][j] == 1 && j + SLIDER_IMG_OUT_PADDING > 0 && j + SLIDER_IMG_OUT_PADDING < CUT_HEIGHT && data[i][j + SLIDER_IMG_OUT_PADDING] == 0) {

data[i][j + SLIDER_IMG_OUT_PADDING] = 2;

}

if (data[i][j] == 1 && i - SLIDER_IMG_OUT_PADDING > 0 && data[i - SLIDER_IMG_OUT_PADDING][j] == 0) {

data[i - SLIDER_IMG_OUT_PADDING][j] = 2;

}

if (data[i][j] == 1 && i + SLIDER_IMG_OUT_PADDING > 0 && i + SLIDER_IMG_OUT_PADDING < CUT_WIDTH && data[i + SLIDER_IMG_OUT_PADDING][j] == 0) {

data[i + SLIDER_IMG_OUT_PADDING][j] = 2;

}

}

}

return data;

}

/**

* 裁剪区块

* 根据生成的滑块形状，对原图和裁剪块进行变色处理

* @param oriImage 原图

* @param targetImage 裁剪图

* @param blockImage 滑块

* @param x 裁剪点x

* @param y 裁剪点y

*/

private static void cutImgByTemplate(BufferedImage oriImage, BufferedImage targetImage, int[][] blockImage, int x, int y) {

for (int i = 0; i < CUT_WIDTH; i++) {

for (int j = 0; j < CUT_HEIGHT; j++) {

int _x = x + i;

int _y = y + j;

int rgbFlg = blockImage[i][j];

int rgb_ori = oriImage.getRGB(_x, _y);

// 原图中对应位置变色处理

if (rgbFlg == 1) {

//抠图上复制对应颜色值

targetImage.setRGB(i,j, rgb_ori);

//原图对应位置颜色变化

oriImage.setRGB(_x, _y, Color.LIGHT_GRAY.getRGB());

} else if (rgbFlg == 2) {

targetImage.setRGB(i, j, Color.WHITE.getRGB());

oriImage.setRGB(_x, _y, Color.GRAY.getRGB());

}else if(rgbFlg == 0){

//int alpha = 0;

targetImage.setRGB(i, j, rgb_ori & 0x00ffffff);

}

}

}

}

/**

* 随机获取一张图片对象

* @param path

* @return

* @throws IOException

*/

public static BufferedImage getRandomImage(String path) throws IOException {

File files = new File(path);

File[] fileList = files.listFiles();

List fileNameList = new ArrayList<>();

if (fileList!=null && fileList.length!=0){

for (File tempFile:fileList){

if (tempFile.isFile() && tempFile.getName().endsWith(".jpg")){

fileNameList.add(tempFile.getAbsolutePath().trim());

}

}

}

Random random = new Random();

File imageFile = new File(fileNameList.get(random.nextInt(fileNameList.size())));

return ImageIO.read(imageFile);

}

/**

* 将IMG输出为文件

* @param image

* @param file

* @throws Exception

*/

public static void writeImg(BufferedImage image, String file) throws Exception {

byte[] imagedata = null;

ByteArrayOutputStream bao=new ByteArrayOutputStream();

ImageIO.write(image,"png",bao);

imagedata = bao.toByteArray();

FileOutputStream out = new FileOutputStream(new File(file));

out.write(imagedata);

out.close();

}

/**

* 将图片转换为BASE64

* @param image

* @return

* @throws IOException

*/

public static String getImageBASE64(BufferedImage image) throws IOException {

ByteArrayOutputStream out = new ByteArrayOutputStream();

ImageIO.write(image,"png",out);

//转成byte数组

byte[] bytes = out.toByteArray();

BASE64Encoder encoder = new BASE64Encoder();

//生成BASE64编码

return encoder.encode(bytes);

}

/**

* 将BASE64字符串转换为图片

* @param base64String

* @return

*/

public static BufferedImage base64StringToImage(String base64String) {

try {

BASE64Decoder decoder=new BASE64Decoder();

byte[] bytes1 = decoder.decodeBuffer(base64String);

ByteArrayInputStream bais = new ByteArrayInputStream(bytes1);

return ImageIO.read(bais);

} catch (IOException e) {

e.printStackTrace();

}

return null;

}

}

代码核心解释

getVerifyImage()接口，主要用来向外部开放，供其他方法调用公开接口，获取最终生成的图片。

其中返回的内容包括：被抠图后处理过的原图，抠图块，扣下图的X轴坐标，Y轴坐标

getBlockData()方法，主要是用来处理抠图块的渲染用色块。因为一般情况下，为了美观、高辨识度以及

对于坐标的隐藏处理，我们会将抠图处理为类似于拼图块的样式，会有凹凸存在。因此需要对其进

行样式处理，并按照处理出来的样式对图片进行上色或者变色处理。具体可研究一下代码

生成的二维数组如图：

image.png

cutImgByTemplate()方法，主要是按照上一个方法生成的二维数组块对原图及抠图进行裁剪和颜色渲染。

处理后的图片如图

image.png

image.png

剩余几个方法基本上都是辅助类，读取图片，将图片转为BASE64等。按需处理即可。

系统流程

在controller层添加一个接口，首先获取图片,以BASE64形式返给前端。

前端获取图片后，获取用户拖动的X轴的距离，连同token及相关信息返回给后端。

后端进行校验，确定是否拖动距离在可允许范围内。并返回给前端相应处理结果。

展示效果：

1.gif

以上仅本人综合网上的教程完成的效果，主要记录下来供自己备忘用。不足之处请见谅。