滑塊驗證位移識別

舉個栗子——> 

大致思路就是解析圖片每個像素點信息，然后通過相鄰像素色差比對，識別出滑塊左側這條邊的位置，然后就可以知道要移動滑塊的距離了。

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) { }

這里只判斷了一條邊，可以定位四側來提高准確率。

然后就是滑動滑塊，平均速度的滑動方式很容易被識別機器人。

效果圖