Sample code to simulate the sliding puzzle verification code operation using Node.js

In recent years, various new verification code layers on the web page have ended, one of which is more common is the sliding verification code, such as the following figure.

使用 Node.js 模拟滑动拼图验证码操作的示例代码 This article describes a method using a pure front-end method to find a sliding endpoint and simulate a sliding.

We need three dependencies: PuPpeteer, Resemble.js, and Canvas. Where

PuPpeteer

is used to open and operate the page, Resemble.js and canvas for finding the end position of the sliding verification code. Related dependenches: “Dependencies”: {“canvas”: “^ 1.6.7”, “PuPpeteer”: “^ 0.12.0”, “ResembleJS”: “^ 2.2.6”}

Next, it is achieved. First, introduce the required library, define some constants.
   Const fs = Require ('fs') const puPpeteer = Require ('PuPpeteer') const resemble = Require ('resemblejs') Const Canvas = Require ('canvas' ) const URL = 'xxx' // this code page access address const width = 600const height = 400const slider_width = 44const sleep = duration => {return new Promise (resolve => {setTimeout (resolve, duration)})} 

Next, use
PuPpeteer to open the verification code page:
   
Const Browser = AWAIT PuPpeteer.launch () const page = await Browser.newPage () Page.SetViewPort ({width, height}) AWAIT Page.goto (URL, {Waituntil: ‘NetWorkidle’})

and then injecting on the page A section of JS, get the position of the verification code slider. This code may require you to adjust according to the actual situation of your page.
 const offset = Await Page.eValuate (() => {let off offset_ifr = $ ('iframe'). Offset () return {top: offset_iFr.top + 222 , LEFT: OFFSET_IFR.LEFT + 10}})   Next, simulate press the left mouse button, then release, and screen and take a screenshot. 
AWAIT Page.Mouse.move (Offset.Left + 10, Offset.top + 10) // Press the mouse AWAIT Page.Mouse.Down ({Button: ‘ LEFT ‘}) // Waiting for the picture AWAIT SLEP (500) // screenshot AWAIT Page.Screenshot ({path:’ screenshot2.png ‘}) AWAIT Page.Mouse.Up ({ButTON: ‘Left’}) // Waiting for the picture AWAIT SLEP (500) // Screenshot AWAIT Page.Screenshot ({Path: ‘Screenshot3.png’})

 At this point, two pictures can be obtained:   and: 

It can be seen that the remaining parts of the two figures Similarly, the difference is whether the verification code slider and the target location are displayed.
Next, in turn resemble.js
, it can be used to obtain two pictures  DIFF  results. 
AWAIT New Promise (resolve => {resemble.outputSettings ({Transparency: 0}) Resemble (‘screenshot2.png’) .compareto (‘screenshot3.png’) .Ignorecolors () .oncomplete (DATA => {fs.writeFileSync (‘diff.png’, data.getbuffer ()) resolve ()}})

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

As follows:

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

Canvas

library, read this

DIFF

picture into the memory, start finding from the upper right corner It is easy to find the position of the rightmost color block, that is, the position of the slider endpoint. Const getDestinationX = min_x => {Const CANVAS = New Canvas (Width, Height) const ctx = canvas.getContext ('2D') const buf = fs.readfilesync ('diff.png') const image = new canvas.image () img.src = buf ctx.drawImage (IMG, 0, 0, Width, Height) Const img_data = ctx.getimagedata (0, 0, Width, Height) .data let Destination_x = -1 for (Let Y = 0; Y = min_x; x– ) {let p = width * y + xp = p

-1) Break} return destination_x – slider_width}
 In this way, the start of the slider is obtained. Location and end position, use  PAGE.MOUSE.MOVE  method to simulate the drag to the end position of the slider to the end position. 

Of course, find the slider endpoint and drag the slider to the correct terminal position is just the first step, the perfect sliding verification code will not only judge whether there is no slip to The correct location will also analyze your drag trajectory. It is important to know that the trajectory of human sliding and machine slide is very different. As for how to distinguish between another complex topic.

Finally, this article is for research reference only, don’t ask me to be detailed. The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds. 使用 Node.js 模拟滑动拼图验证码操作的示例代码

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment