扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本文实例讲述了java图片滑动验证（登录验证）原理与实现方法。分享给大家供大家参考，具体如下：
在大余等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、网站制作 网站设计制作按需网站策划,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站建设,外贸营销网站建设,大余网站建设费用合理。
这是我简单做出的效果图，处理300X150px的校验图，并把图片发到前端，用时50毫秒左右，速度还是非常快的。
原理：
1.利用java从大图中随机抠出一张小图，并在大图上给抠出小图的位置加阴影，然后把这两张图片返回给前端；
2.前端获取图片，用户滑动小图到阴影的位置，获取小图滑动的距离，返回给java后台进行校验；
3.校验通过，返回校验通过编号；
4.前端调登录接口，把账号、密码、和校验编号传到Java后台进行登录。
实现：
1.计算需要的小图轮廓，用二维数组来表示，二维数组有两张值，0和1，其中0表示没有颜色，1有颜色，如下图，我要抠图的轮廓是这样的：
左边和下边有有半圆，这个根据圆的公式就可以了，代码示例：
static int targetLength=55;//小图长
static int targetWidth=45;//小图宽
static int circleR=6;//半径
static int r1=3;//距离点
/**
*
* @Createdate: 2019年1月24日上午10:52:42
* @Title: getBlockData
* @Description: 生成小图轮廓
* @author mzl
* @return int[][]
* @throws
*/
private static int[][] getBlockData() {
int[][] data = new int[targetLength][targetWidth];
double x2 = targetLength-circleR;
//随机生成圆的位置
double h2 = circleR + Math.random() * (targetWidth-3*circleR-r1);
double po = circleR*circleR;
double xbegin = targetLength-circleR-r1;
double ybegin = targetWidth-circleR-r1;
for (int i = 0; i < targetLength; i++) {
for (int j = 0; j < targetWidth; j++) {
double d3 = Math.pow(i - x2,2) + Math.pow(j - h2,2);
double d2 = Math.pow(j-2,2) + Math.pow(i - h2,2);
if ((j <= ybegin && d2 <= po)||(i >= xbegin && d3 >= po)) {
data[i][j] = 0;
} else {
data[i][j] = 1;
}
}
}
return data;
}
2.根据计算处理的小图轮廓，在大图上抠图
/**
*
* @Createdate: 2019年1月24日上午10:51:30
* @Title: cutByTemplate
* @Description: 生成小图片、给大图片添加阴影
* @author mzl
* @param oriImage
* @param targetImage
* @param templateImage
* @param x
* @param y void
* @throws
*/
private static void cutByTemplate(BufferedImage oriImage,BufferedImage targetImage, int[][] templateImage, int x,int y){
for (int i = 0; i < targetLength; i++) {
for (int j = 0; j < targetWidth; j++) {
int rgb = templateImage[i][j];
// 原图中对应位置变色处理
int rgb_ori = oriImage.getRGB(x + i, y + j);
if (rgb == 1) {
//抠图上复制对应颜色值
targetImage.setRGB(i, j, rgb_ori);
//原图对应位置颜色变化
oriImage.setRGB(x + i, y + j, rgb_ori & 0x363636 );
}else{
//这里把背景设为透明
targetImage.setRGB(i, j, rgb_ori & 0x00ffffff);
}
}
}
}
3.把大图小图转base64码，方便返回给前端