Java实现拖动图片验证处理

效果

话不多说，点击查看 实现的效果

• 前端

• 后台

核心流程分析

• 服务端随机生成滑块图片和带滑块抠图的背景图片，并保存滑块抠图的坐标位置

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

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

• 滑动轨迹验证通过，服务端生成ticket票据和验证码随机数jsonp方式给到前端

• 前端将验证通过的ticket和随机数上报给业务服务端

• 业务服务端调用API方式到验证码服务器校验ticket的合法性

本文重点讲的核心是滑动验证码中滑块和阴影背景图的处理生成，滑块的形状和抠图坐标位置都是随机
生成的，这样可以增加暴力破解的难度。

话不多说，直接上关键实现代码

    /**
     * 生成随机滑块形状
     * 
     * 0 透明像素
     * 1 滑块像素
     * 2 阴影像素
     *
     * @return
     */
    private static int[][] getBlockData() {
   
        int[][] data = new int[CUT_WIDTH][CUT_HEIGHT];

        //(x-a)²+(y-b)²=r²
        //x中心位置左右5像素随机
        double x1 = RECTANGLE_PADDING + (CUT_WIDTH - 2 * RECTANGLE_PADDING) / 2.0 - 5 + RandomUtil.randomInt(0, 11);
        //y 矩形上边界半径-1像素移动
        double y1_top = RECTANGLE_PADDING - RandomUtil.randomInt(0, 3);
        double y1_bottom = CUT_HEIGHT - RECTANGLE_PADDING + RandomUtil.randomInt(0, 3);
        double y1 = RandomUtil.randomInt(0, 2) == 1 ? y1_top : y1_bottom;


        double x2_right = CUT_WIDTH - RECTANGLE_PADDING - circleR + RandomUtil.randomInt(0, 2 * circleR - 3);
        double x2_left = RECTANGLE_PADDING + circleR - 2 - RandomUtil.randomInt(0, 2 * circleR - 3);
        double x2 = RandomUtil.randomInt(0, 2) == 1 ? x2_right : x2_left;
        double y2 = RECTANGLE_PADDING + (CUT_HEIGHT - 2 * RECTANGLE_PADDING) / 2.0 - 5 + RandomUtil.randomInt(0