快捷導(dǎo)航

使用 Node.js 模擬滑動拼圖驗(yàn)證碼操作的示例代碼

更新時間：2017年11月02日 09:48:11 作者：oldj''''s

本篇文章主要介紹了使用 Node.js 模擬滑動驗(yàn)證碼操作的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

近幾年，網(wǎng)頁上各種新型驗(yàn)證碼層出不窮，其中一種比較常見的是滑動驗(yàn)證碼，比如下圖這種。

本文介紹了一種使用純前端方法尋找滑動終點(diǎn)并模擬滑動的方法。

我們需要三個依賴庫： puppeteer 、 Resemble.js 以及canvas 。其中 puppeteer 用于打開并操作頁面， Resemble.js 及 canvas 用于尋找滑動驗(yàn)證碼的終點(diǎn)位置。相關(guān)依賴如下：

"dependencies": {
 "canvas": "^1.6.7",
 "puppeteer": "^0.12.0",
 "resemblejs": "^2.2.6"
}

接下來是實(shí)現(xiàn)要點(diǎn)。首先，引入所需的庫，定義一些常量。

const fs = require('fs')
const puppeteer = require('puppeteer')
const resemble = require('resemblejs')
const Canvas = require('canvas')

const URL = 'xxx' // 驗(yàn)證碼頁面訪問地址
const width = 600
const height = 400
const slider_width = 44

const sleep = duration => {
 return new Promise(resolve => {
 setTimeout(resolve, duration)
 })
}

接下來，使用 puppeteer 打開驗(yàn)證碼頁面：

const browser = await puppeteer.launch()
const page = await browser.newPage()
page.setViewport({width, height})

await page.goto(URL, {
 waitUntil: 'networkidle'
})

然后往頁面上注入一段 JS ，獲取驗(yàn)證碼滑塊的位置。這一段代碼可能需要你根據(jù)自己頁面的實(shí)際情況進(jìn)行調(diào)整。

const offset = await page.evaluate(() => {
 let offset_ifr = $('iframe').offset()

 return {
 top: offset_ifr.top + 222,
 left: offset_ifr.left + 10
 }
})

接下來，模擬按下鼠標(biāo)左鍵，再放開，并分別截圖。

await page.mouse.move(offset.left + 10, offset.top + 10)
// 按下鼠標(biāo)
await page.mouse.down({
 button: 'left'
})
// 等待圖片出現(xiàn)
await sleep(500)
// 截圖
await page.screenshot({path: 'screenshot2.png'})

await page.mouse.up({
 button: 'left'
})
// 等待圖片出現(xiàn)
await sleep(500)
// 截圖
await page.screenshot({path: 'screenshot3.png'})

此時可以得到兩個圖片：

以及：

可以看到，兩個圖其余部分都相同，區(qū)別在于是否顯示驗(yàn)證碼滑塊以及目標(biāo)位置。

接下來，就輪到 Resemble.js 出場了，可以使用它獲得兩個圖片的 diff 結(jié)果。

await new Promise(resolve => {
 resemble.outputSettings({
 transparency: 0
 })
 resemble('screenshot2.png')
 .compareTo('screenshot3.png')
 .ignoreColors()
 .onComplete(data => {
  fs.writeFileSync('diff.png', data.getBuffer())
  resolve()
 })
})

結(jié)果如下：

接下來，再使用 canvas 庫，將這個 diff 圖片讀入內(nèi)存，從右上角開始查找，很容易即可找到最右側(cè)色塊的位置，也即滑塊終點(diǎn)的位置。

const getDestinationX = min_x => {
 const canvas = new Canvas(width, height)
 const ctx = canvas.getContext('2d')
 const buf = fs.readFileSync('diff.png')
 const img = 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 < height; y++) {
 for (let x = width; x >= min_x; x--) {
  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
}

這樣，便獲得了滑塊的起始位置以及終點(diǎn)位置，再使用 puppeteer 的 page.mouse.move 方法模擬拖動，將滑塊拖到終點(diǎn)位置即可。