生成图片验证码，并完成校验

正文

生成一个图片验证码，用户在前端拖动后，校验图片是否能与抠图吻合。主要生成以下四个参数：

@Data
@AllArgsConstructor
@NoArgsConstructor
public class VerifyImage {

    /**
     * 被抠图后处理过的原图
     */
    private String srcImage;
    /**
     * 抠图块
     */
    private String markImage;
    /**
     * 扣下图的X轴坐标
     */
    private int locationX;
    /**
     * 扣下图的Y轴坐标
     */
    private int locationY;


}

srcImage与markImage，都是以BASE64形式返给前端。
locationX与locationY，是校验用户拖动后，前端传过来的X轴与Y轴是否能在一定的误差内能匹配上

代码

package cn.xyz.commons.utils;

import cn.xyz.commons.vo.JSONMessage;
import cn.xyz.commons.vo.VerifyImage;
import cn.xyz.mianshi.utils.SKBeanUtils;
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  huangjunhao
 * @date  2019/06/13 10:26
 **/
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;
    /**
     * x轴图片误差
     */
    private static int X_SIZE = 3;
    /**
     * y轴图片误差
     */
    private static int Y_SIZE = 3;

    /**
     * 根据传入的路径生成指定验证码图片
     *
     * @param filePath
     * @return
     * @throws IOException
     */
    public static VerifyImage getVerifyImage(String filePath) throws IOException {
        File file = new File(filePath);
        BufferedImage srcImage = ImageIO.read(file);
        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);
    }

    /**
     * 校验并返回验证结果
     *
     * @param locationX 用户滑动的X轴
     * @param locationY 用户滑动的Y轴
     * @param userId      userId
     * @return 返回信息
     */
    public static JSONMessage imgVerify(Integer locationX, Integer locationY, Integer userId) {
        if (EmptyUtils.isNotEmpty(locationX) || EmptyUtils.isNotEmpty(locationY) || EmptyUtils.isNotEmpty(userId)) {

            //获取用户之前生成的图片验证码
            VerifyImage data = SKBeanUtils.getRedisService().getImgVerify(userId);
            if(EmptyUtils.isEmpty(data)){
                return JSONMessage.failure("用户尚未获取验证码");
            }

            // 用户传进来的图片
            if (locationX <= 0 || locationY <= 0) {
                return JSONMessage.failure("校验错误");
            }

            // 缓存中存的图片
            int dataLocationX = data.getLocationX();
            int dataLocationY = data.getLocationY();

            //x轴和y轴的坐标相差不能超过3px
            int xl = dataLocationX - locationX;
            int yl = dataLocationY - locationY;
            if (Math.abs(xl) >= X_SIZE|| Math.abs(yl) >= Y_SIZE) {
                return JSONMessage.failure("校验错误");
            }

            //校验成功后删除用户之前生成的图片验证码
            SKBeanUtils.getRedisService().delImgVerify(userId);
            return JSONMessage.success("success");
        }
        return JSONMessage.failure("校验错误");
    }


    /**
     * 生成随机滑块形状
     * <p>
     * 0 透明像素
     * 1 滑块像素
     * 2 阴影像素
     * @return int[][]
     */
    private static int[][] getBlockData() {
        int[][] data = new int[CUT_WIDTH][CUT_HEIGHT];
        Random random = new Random();
        //x中心位置左右5像素随机
        double x1 = RECTANGLE_PADDING + (CUT_WIDTH - 2 * RECTANGLE_PADDING) / 2.0 - 5 + random.nextInt(10);
        //y 矩形上边界半径-1像素移动
        double y1Top = RECTANGLE_PADDING - random.nextInt(3);
        double y1Bottom = CUT_HEIGHT - RECTANGLE_PADDING + random.nextInt(3);
        double y1 = random.nextInt(2) == 1 ? y1Top : y1Bottom;


        double x2Right = CUT_WIDTH - RECTANGLE_PADDING - circleR + random.nextInt(2 * circleR - 4);
        double x2Left = RECTANGLE_PADDING + circleR - 2 - random.nextInt(2 * circleR - 4);
        double x2 = random.nextInt(2) == 1 ? x2Right : x2Left;
        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 xl = x + i;
                int yl = y + j;
                int rgbFlg = blockImage[i][j];
                int rgbori = oriImage.getRGB(xl, yl);
                // 原图中对应位置变色处理
                if (rgbFlg == 1) {
                    //抠图上复制对应颜色值
                    targetImage.setRGB(i,j, rgbori);
                    //原图对应位置颜色变化
                    oriImage.setRGB(xl, yl, Color.LIGHT_GRAY.getRGB());
                } else if (rgbFlg == 2) {
                    targetImage.setRGB(i, j, Color.WHITE.getRGB());
                    oriImage.setRGB(xl, yl, Color.GRAY.getRGB());
                }else if(rgbFlg == 0){
                    //int alpha = 0;
                    targetImage.setRGB(i, j, rgbori & 0x00ffffff);
                }
            }

        }
    }


    /**
     * 随机获取一张图片对象
     * @param path
     * @return
     * @throws IOException
     */
    public static BufferedImage getRandomImage(String path) throws IOException {
        File files = new File(path);
        File[] fileList = files.listFiles();
        List<String> 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;
    }
}

package com.shiku.mianshi.controller;

import cn.xyz.commons.utils.RandomUtil;
import cn.xyz.commons.utils.VerifyImageUtil;
import cn.xyz.commons.vo.JSONMessage;
import cn.xyz.commons.vo.VerifyImage;
import cn.xyz.mianshi.utils.SKBeanUtils;
import org.springframework.web.bind.annotation.*;

/**
 * 测试类
 *
 * @author 黄俊豪
 * @date 2020/06/16
 */
@RestController
@RequestMapping("/imgVerify")
public class ImgVerifyController {


    /**
     * 生成验证图片并且保存到缓存中，过期时间五分钟
     *
     * @param userId
     * @return
     * @throws Exception
     */
    @PostMapping("/list")
    public VerifyImage list(@RequestParam Integer userId) throws Exception {
        Integer randomNum = RandomUtil.getRandomNum(1, 10);
        //windows路径
        String filePath = "G:\\mianshi-parent\\mianshi-im-api\\src\\main\\resources\\data\\img\\"+randomNum+".jpg";
        //linux路径
        //String filePath = "/opt/spring-boot-imapi/imgVerify/"+randomNum+".jpg";
        //根据图片路径生成抠图
        VerifyImage verifyImage = VerifyImageUtil.getVerifyImage(filePath);
        //保存到缓存
        SKBeanUtils.getRedisService().addImgVerify(userId, verifyImage);
        return verifyImage;
    }

    /**
     * 校验并返回验证结果
     *
     * @param locationX 用户滑动的X轴
     * @param locationY 用户滑动的Y轴
     * @param userId      userId
     * @return 返回信息
     */
    @PostMapping(value = "/verify")
    public JSONMessage verify(Integer locationX,Integer locationY, Integer userId) {
        return VerifyImageUtil.imgVerify(locationX, locationY, userId);
    }



}

其中，我把生成的verifyImage对象存到的缓存，过期时间是五分钟，在这五分钟内，用户校验的都是之前生成的图像，除非他刷新了，重新生成图片。校验成功后删除缓存。