使用Node.js模拟滑动拼图验证码操作的示例代码

近年来，网页中出现了各种新的验证码，其中之一就是滑动验证码，如下图。

介绍了一种用纯前端法寻找滑动终点和模拟滑动的方法。

我们需要三个依赖的库：puppet、like . js和canvas。使用Puppeteer打开和操作页面，使用liggest . js和canvas找到滑动验证码的结束位置。依赖关系如下：

dependencies ' : { ' canvas ' : ' 1 . 6 . 7 '，' puppet' 3360' 0.12.0 '，' rebound js ' : ' 2 . 2 . 6 ' }是实现的关键点。首先介绍需要的库，定义一些常量。

const fs=require(' fs ')const puppeter=require(' puppeter ')const like=require(' liesselejs ')const Canvas=require(' Canvas ')const URL=' XXX '/验证码页面的访问地址为const width=600 const height=400 const slider _ width=44 const sleep=duration={返回新承诺(resolve={settimeout (resolve，duration)})}接下来，用puppeter打开验证码页面：

const browser=await puppet . launch()const page=await browser . new page()page . set viewport({ width，height}) awaitpage.goto (URL，{ waituntil3360 ' network idle ' })然后在页面中注入一个JS，得到验证码滑块的位置。这段代码可能需要您根据页面的实际情况进行调整。

Const offset=awaitpage。求值(()={let offset _ IFR=$ ('iframe ')。offset()返回{top:offset _ IFR。top222，left:offset _ IFR。left10}})接下来，模拟按下鼠标左键并释放它。

await page . mouse . move(offset . left 10，Offset.top 10)//按下鼠标await page . mouse . down({ button : ' left ' })//等待图片出现await sleep(500)//截图await page .截图({path3360 '截图2 . png ' })await page . mouse . up({ button : ' left ' })//等待图片出现await sleep(500)//截图await page({ path 333330截图。

以及：

可以看到，除了是否显示验证码滑块和目标位置外，其余两个图都是一样的。

接下来，轮到rejust . js了，它可以用来获取两张图片的diff结果。

等待新的承诺(解析={ like . output settings({ transparency : 0 })类似(' screenshot2.png ')。compareTo('screenshot3.png ')。ignorecalors()。on complete(data={ fs . write file sync(' diff . png '，data.getbuffer ()) resolve ()})})结果如下：

接下来，使用画布库将这张diff图片读入内存，从右上角开始搜索，这样很容易找到最右边色块的位置，也就是滑块终点的位置。

const getDestinationX=min _ x={ const Canvas=new Canvas(宽度，高度)const CTX=Canvas . getcontext(' 2d ')const buf=fs . readfilesync(' diff . png ')const img=new Canvas。image()img . src=buf CTX . draw image(img，0，0，宽度，高度)const img _ data=CTX . getimagedata(0，0，宽度，高度)。数据let destination _ x=-1 for(let y=0；y高度；y ) { for(让x=宽度；x=min _ xx-){ let p=width * y x p=p ^ 2 If(img _ data[p ^ 3]==255 img _ data[p-10 * 4 ^ 3]==255){ destination _ x=x break } } If(destination _ x-1)break } return destination _ x-slider _ width }这样就可以得到滑块的起始位置和结束位置，然后使用Puppet的page.mouse.move方法模拟拖动，就可以将滑块拖动到结束位置。

当然，找到滑块的终点并将其拖动到正确的终点只是第一步。一个完美的滑动验证码不仅会判断它是否滑动到正确的位置，还会分析你的拖动轨迹。要知道人类滑行的轨迹和机器滑行的轨迹有很大的不同，如何区分是另一个复杂的话题。

最后，本文仅供研究参考。不要问我详细的代码。以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。