近几年,网页上各种新型验证码层出不穷,其中一种比较常见的是滑动验证码,比如下图这种。
本文介绍了一种使用纯前端方法寻找滑动终点并模拟滑动的方法。
我们需要三个依赖库:操纵木偶的人,就像。js以及画布。其中<代码>操纵> 相似。画布js代码及<代码> 用于寻找滑动验证码的终点位置。相关依赖如下:
“依赖”:{
“画布”:“^ 1.6.7”,
“操纵”:“^ 0.12.0”,
:“resemblejs 2.2.6 ^。”
}
接下来是实现要点。首先,引入所需的库,定义一些常量。
const fs=要求(fs)
const操纵木偶的人=要求(“操纵”)
const像=要求(“resemblejs”)
const帆布=要求(“画布”)
const URL=皒xx”//验证码页面访问地址
const宽度=600
const高度=400
const slider_width=44
const睡眠==持续时间比;{
返回新的承诺(解决=比;{
setTimeout(解决,持续时间)
}）
}
接下来,使用<代码> 静静打开验证码页面:
const浏览器=等待puppeteer.launch ()
const页面=等待browser.newPage ()
页面。setViewport({宽度、高度})
等待页面。转到(URL, {
waitUntil:“networkidle”
})
然后往页面上注入一段JS,获取验证码滑块的位置。这一段代码可能需要你根据自己页面的实际情况进行调整。
const抵消=等待page.evaluate(()=比;{
让offset_ifr=$ (' iframe ') .offset ()
返回{
上图:offset_ifr。+ 222,
左:offset_ifr。左+ 10
}
})
接下来,模拟按下鼠标左键,再放的开,并分别截的图。
等待page.mouse.move(偏移量。左+ 10,抵消。+ 10)//按下鼠标
等待page.mouse.down ({
按钮:“左”
}）//等待图片出现
等待睡眠(500)//截图
等待页面。截图({路径:“screenshot2.png”})
等待page.mouse.up ({
按钮:“左”
}）//等待图片出现
等待睡眠(500)//截图
等待页面。截图({路径:“screenshot3.png”})
此时可以得到两个图片:
以及:
可以看的到,两个图其余部分都相同,区别在于是否显示验证码滑块以及目标位置。
接下来,就轮到<代码>相似。js代码出场了,可以使用它获得两个图片的<代码> diff>
等待新的承诺(解决=比;{
resemble.outputSettings ({
透明度:0
}）
像(“screenshot2.png”)
.compareTo (“screenshot3.png”)
.ignoreColors ()
.onComplete (data=https://www.yisu.com/zixun/> {
fs.writeFileSync (“diff。png, data.getBuffer ())
解决()
}）
})
结果如下:
接下来,再使用画布<代码> 代码库,将这个<代码> diff>
const getDestinationX=min_x=比;{
const帆布=新画布(宽度、高度)
const ctx=canvas.getContext (2 d)
const buf=fs.readFileSync (“diff.png”)
const img=new Canvas.Image ()
img。src=https://www.yisu.com/zixun/buf
ctx。drawImage (img, 0, 0,宽度、高度)
const img_data=ctx。getImageData(0, 0,宽度、高度). data
让destination_x=1
(让y=0;y <高度;y + +) {
(让x=宽度;x>=min_x;x () {
让p=宽度* y + x
p=p <2
如果(img_data [p + 3]===255 & & img_data (p - 10 * 4 + 3)===255) {
destination_x=x
打破
}
}
如果(destination_x> 1)休息
}
返回destination_x——slider_width
}
