zoukankan      html  css  js  c++  java
  • 滑块验证位移识别

    举个栗子——> 

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

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

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

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

    效果图

  • 相关阅读:
    NodeMCU快速上云集锦
    云数据库 MySQL 8.0 重磅发布,更适合企业使用场景的RDS数据库
    MySQL 8.0 技术详解
    为更强大而生的开源关系型数据库来了!阿里云RDS for MySQL 8.0 正式上线!
    阿里云CDN技术掌舵人文景:相爱相杀一路狂奔的这十年
    容器服务kubernetes federation v2实践五:多集群流量调度
    Helm V3 新版本发布
    Serverless助力AI计算:阿里云ACK Serverless/ECI发布GPU容器实例
    详解TableStore模糊查询——以订单场景为例
    洛谷P2727 01串 Stringsobits
  • 原文地址:https://www.cnblogs.com/javencs/p/10320995.html
Copyright © 2011-2022 走看看