滑块验证位移识别

举个栗子——> 

大致思路就是解析图片每个像素点信息，然后通过相邻像素色差比对，识别出滑块左侧这条边的位置，然后就可以知道要移动滑块的距离了。

1. 图片解析

我用的是　get-pixels　这个包，也可以用原生；

let pixels = await new Promise(function(resolve, reject) {
            getPixels(url, function(err, pixel) {
                if(err) {
                    console.log("Bad image path");
                    reject(err)
                } else{
                    resolve(pixel)
                }
            })
        })

具体pixels内容如下

data 是所有像素信息，为了分析方便，格式整理，每个像素放一个数组，并且每行像素放一个数组，最后有点像矩阵

举个栗子：

newPixelsArr = [
[ [147, 123, 121, 255],  [147, 123, 121, 255],  [147, 123, 121, 255] ] ,
[ [147, 123, 121, 255],  [147, 123, 121, 255],  [147, 123, 121, 255] ] , 
[ [147, 123, 121, 255],  [147, 123, 121, 255],  [147, 123, 121, 255] ] , 
[ [147, 123, 121, 255],  [147, 123, 121, 255],  [147, 123, 121, 255] ]
]

每个小数组就是一个像素（RGBA），把像素按图片中的位置进行排序分组，如上例子就是一张宽3px，高4px的图片。

然后就可以对比像素了。像素差是要自己调整的，看多少识别效果最好，我这边是40；

现在来识别滑块左侧的这条边，对，就是有个缺口的。

那么识别条件就是：每列的像素和它相邻左侧的那列做对比，如果有连续 X 个像素和左侧的像素差大于40，接着相隔Y 这像素后，有连续 Z 个像素和左侧的像素差大于40；那么就判断这列为滑块的左侧边，即滑块滑动的距离。

X，Z 我取范围10-14

循环部分代码：

const pixelDifference = 40;

// 我是从图片右至左匹配的

data1 = newPixelsArr[s].pop();
data2 = newPixelsArr[s][newPixelsArr[s].length-1];
const res1=Math.abs(data1[0]-data2[0]);
const res2=Math.abs(data1[1]-data2[1]);
const res3=Math.abs(data1[2]-data2[2]);
// 判断色差
if(!(res1 < pixelDifference && res2 < pixelDifference && res3 < pixelDifference)) {

} else if(continuous === true) {

}

这里只判断了一条边，可以定位四侧来提高准确率。

然后就是滑动滑块，平均速度的滑动方式很容易被识别机器人。

效果图