图片滑动验证的实现

有时候在页面登录或者注册的时候，为了防止不是机器人操作，会让用户手动来滑动图片验证。我在做项目时用到了这个功能，这里记录一下自己的想法和做法。

实现的效果如图所示：

好了，现在来说说想法。

关于图片滑动验证一般是要前后端来交互的。首先是要后台处理好图片，然后将处理出来的图片返回到前台。后台随机抽取一张模板图片，也就是完整的图片，然后通过代码来操作将一块区域的图扣出来，将扣掉的地方填成灰色或者黑色，这样，素材就有了。

在返回到前台时，要将图片转码为base编码。在前台接收时，要使用如下方式来讲base64编码的图片显示：

$("#validateImage").attr("src", "data:image/png;base64,"+data.srcImage);$("#slideImage").attr("src", "data:image/png;base64,"+data.cutImage);

然后前台通过滑动图片来验证。这种情况要存储滑动的距离，也就是像素点。当然，图片生成时也要将抠图的坐标记录，要和滑动后传过来的数据进行验证。

图片处理类如下：我这个图片处理类的半圆型的半径并没有算进那个坐标区域，所以在判断是否拼图正确的情况下必须要将那个半径加上或者减去（专属我自己的项目，符合自己的方式，如果不符合你的，请将想法吃透，然后在我的工具类中提炼出一些关键的技术，自己尝试写吧）。

package news.utils;

import java.awt.Color;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;

import javax.imageio.ImageIO;

import news.bean.VerifyImage;
import sun.misc.BASE64Encoder;

/**
 * 处理图片的工具类，用于实现前端的滑动验证
 * @author 徐金仁
 */
public class VerifyImageUtils3 {
    //原图片的宽度
    private static int ORI_HEIGHT = 160;
    //原图片的高度
    private static int ORI_WIDTH = 322;
    //抠图上面的半径
    private static int RADIUS = 8;
    //抠图区域的高度
    private static int TAM_HEIGHT = 40;
    //抠图区域的宽度
    private static int TAM_WIDTH = 40;
    //抠图内部矩形填充的大小
    private static int RAN_SIZE = 8;
    //抠图的边框宽度
    private static int BORDER_SIZE = 1;
    //
    private static int XPosition ;
    private static int YPosition ;

    Random random =new Random();

    /**
     * 提供的对外的公共接口，用于获取处理后的图片和抠图的位置
     * @param filePath 存储原始图片的位置
     * @throws Exception
     */
    public VerifyImage getImages(String filePath) throws Exception{
        VerifyImage ve = new VerifyImage();
        //随机获取一张图片
        File imageFile = getRandomImage(filePath);
        BufferedImage oriImage = ImageIO.read(imageFile);
        ORI_HEIGHT = oriImage.getHeight();
        ORI_WIDTH = oriImage.getWidth();
        //获取抠图的坐标，防止不恰当的坐标会出现在图片的边沿，
        XPosition = TAM_WIDTH + random.nextInt(oriImage.getWidth() - TAM_WIDTH * 3);
        YPosition = TAM_HEIGHT + random.nextInt(oriImage.getHeight() - TAM_HEIGHT * 2);
        //获取抠图的区域,将这个图片的坐标传进去，来获取到抠图的位置和大小，就是将抠图给定死
        int[][] blockData = getBlockData(oriImage);
        //处理图片，将得到的两张图片放入map中
        Map<String, BufferedImage> dataMap = createVerifyImage(oriImage,blockData);
        //将那些图片转为base64存储
        String srcImage = ImageBase64(dataMap.get("oriImage"));
        String cutImage = ImageBase64(dataMap.get("cutImage"));
        ve.setCutImage(cutImage);
        ve.setSrcImage(srcImage);
        ve.setXPosition(XPosition);
        ve.setYPosition(YPosition);
        return ve;
    }
    /**
     * 将图片转为base64存储
     * @param bufferedImage 要转化的图片
     * @return
     * @throws IOException
     */
    private String ImageBase64(BufferedImage bufferedImage) throws IOException {
         ByteArrayOutputStream out = new ByteArrayOutputStream();
         ImageIO.write(bufferedImage,"png",out);
            //转成byte数组
            byte[] bytes = out.toByteArray();
            BASE64Encoder encoder = new BASE64Encoder();
            //生成BASE64编码
            return encoder.encode(bytes);
    }
    /**
     * 处理图片，将得到的两张图片放入map中
     * @param oriImage 原图
     * @param blockData 整张布局的区域
     * @return 存储图片的map
     */
    private Map<String, BufferedImage> createVerifyImage(BufferedImage oriImage, int[][] blockData) {
        Map<String, BufferedImage> map = new HashMap<String, BufferedImage>();
        int h = blockData.length;
        int w = blockData[0].length;
        BufferedImage cutImage = new BufferedImage(TAM_WIDTH + 2*RADIUS,TAM_HEIGHT + 2*RADIUS,BufferedImage.TYPE_4BYTE_ABGR);
        int i2,j2;
        for(int i = 0; i < TAM_WIDTH + 2*RADIUS; i ++){
            for(int j = 0; j < TAM_HEIGHT + 2*RADIUS; j ++){
                i2 = i + XPosition - RADIUS;
                j2 = j + YPosition - RADIUS;
                if(blockData[i2][j2] == 2){
                    cutImage.setRGB(i, j, oriImage.getRGB(i2, j2));
                    oriImage.setRGB(i2, j2, Color.gray.getRGB());
                }
            }
        }
        map.put("cutImage", cutImage);
        map.put("oriImage", oriImage);
        return map;
    }
    /**
     * 获取抠图区域，返回一个数组，上面展现了抠图的位置和具体区域
     * @param oriImage
     * @return
     */
    private int[][] getBlockData(BufferedImage oriImage) {
        ORI_HEIGHT = oriImage.getHeight();
        ORI_WIDTH = oriImage.getWidth();
        //要先选择四边中的一条边来选择圆心，1、 2、 3、 4分别代表上下左右
        int chooseR = random.nextInt(4) + 1;
        int[][] blockData = new int[ORI_WIDTH][ORI_HEIGHT];
        //矩形区域处理
        for(int i = 0; i <ORI_WIDTH; i++){
            for(int j = 0; j < ORI_HEIGHT; j ++){
                blockData[i][j] = 0;
                if(i >= XPosition && j>= YPosition && j<= YPosition + TAM_HEIGHT  && i<= XPosition + TAM_WIDTH ){
                    blockData[i][j] = 2;
                }
            }
        }
        //圆型区域凸出块
        //(x - a)^2 + (y - b)^2 = r^2
        int x ;
        int y ;
        //圆形区域的凹陷块
        int x2;
        int y2;
        String sx;
        if(chooseR== 1){//下
            x = (XPosition + TAM_HEIGHT / 2);
            y = YPosition;
            sx = "下";
            x2 = (XPosition);
            y2 = YPosition + TAM_HEIGHT / 2;
        }else if(chooseR == 2){//上
            x = (XPosition + TAM_HEIGHT / 2);
            y = YPosition + TAM_WIDTH ;
            sx = "上";
            x2 = (XPosition + TAM_HEIGHT );
            y2 = YPosition + TAM_HEIGHT / 2;
        }else if(chooseR == 3){//左
            x = (XPosition);
            y = YPosition + TAM_HEIGHT / 2;
            x2 = (XPosition + TAM_HEIGHT / 2);
            y2 = YPosition + TAM_WIDTH ;
            sx = "左";
        }else{//右
            x = (XPosition + TAM_HEIGHT );
            y = YPosition + TAM_HEIGHT / 2;
            sx = "右";
            x2 = (XPosition + TAM_HEIGHT / 2);
            y2 = YPosition;
        }
        //将圆形区域标记上
        for(int i = x-RADIUS; i < x + RADIUS; i ++){
            for(int j = y-RADIUS; j < y + RADIUS; j ++){
                if(Math.pow(Math.abs(x - i), 2) + Math.pow(Math.abs(y - j), 2) <= Math.pow(RADIUS, 2)){
                    //说明在圆内
                    blockData[i][j] = 2;
                }
            }
        }
        for(int i = x2-RADIUS; i < x2 + RADIUS; i ++){
            for(int j = y2-RADIUS; j < y2 + RADIUS; j ++){
                if(Math.pow(Math.abs(x2 - i), 2) + Math.pow(Math.abs(y2 - j), 2) <= Math.pow(RADIUS, 2)){
                    //说明在圆内
                    blockData[i][j] = 0;
                }
            }
        }
        return blockData;
    }
    /**
     * 随机获取一个图片文件
     * @param filePath
     * @return
     * @throws Exception
     */
    private File getRandomImage(String filePath) throws Exception {
        File file = new File(filePath);
        if(!file.exists()){
            throw new Exception("该文件路径不对");
        }
        if(file.isDirectory()){
            File[] files = file.listFiles();
            if(files.length <= 0){
                throw new Exception("该文件夹内没有文件！");
            }else{

                int index = random.nextInt(files.length);
                return files[index];
            }
        }else{
            return file;
        }
    }
}

思路启发来源于网上对于图片滑动验证的原理，技术实现来源于自己对于下面博客的关键技术的提炼：https://blog.csdn.net/MrSpirit/article/details/100653864

原文地址：https://www.cnblogs.com/1998xujinren/p/12334895.html