應該都很熟悉

點擊滑塊然后移動到圖片缺口進行驗證

現在越來越多的網站使用這樣的驗證方式

為的是增加驗證碼識別的難度

那么

對于這種驗證碼

應該怎么破呢

接下來就是

打開 b 站的登錄頁面

https://passport.bilibili.com/login

image

可以看到登錄的時候需要進行滑塊驗證

按下 F12

進入 Network

看下我們將滑塊移到缺口松開之后做了什么提交

可以看到是一個 GET 請求

但是

這請求鏈接也太特么長了吧

我們來看看請求的參數是怎么樣的

哇靠

gt？

challenge？

w？

這些都是什么鬼參數

還加密了

完全下不了手啊

既然以請求的方式不好弄

我們從它們的源代碼入手

看看有什么突破口

回到 b 站的登錄頁

按下 F12

進入 Element

然后點擊滑塊出現了圖片

定位一下

發現有兩個 a 標簽

一個 class 是 gt_bg gt_show

一個 class 是 gt_fullbg gt_show

和小帥b想的一樣

這個驗證碼應該是有兩張圖片

一張是完全的背景圖片

一張是缺口的圖片

那把這兩張圖片下載下來對比一下不就行了

打開 a 標簽一看

一張圖片被切割成很多小塊

原來這張圖片是拼出來的

我們看看原始圖片是怎么樣的

記得私信小編【學習】領取Python學習教程哦。

什么亂七八糟的

再仔細看下源代碼

原來是在同一張圖片通過偏移量合成了一張完整的圖片

background-position: -277px -58px;

看了一下缺口的圖片也是如此

到這里

我們的第一個思路就是

下載這兩張原始圖片

然后通過偏移量合成兩張真正的圖片

背景圖

image

缺口圖

↓變身

那么怎么做呢？

因為我們還要模擬滑動滑塊

所以呢

我們要用到selenium

打開b站的登錄頁

然后等到那個滑塊顯示出來

# 獲取滑塊按鈕

接下來我們就獲取頁面的源碼

driver.page_source

然后使用bs 獲取兩張原始背景圖片的 url

bs=BeautifulSoup(driver.page_source,'lxml')

拿到了圖片地址之后

將圖片下載下來

# 將圖片格式存為 jpg 格式

ok

我們已經把兩張原始圖片下載下來了

那么接下來就是要合成圖片了

我們要根據圖片的位置來合成

也就是源碼中的 background-position

獲取每一個小圖片的位置

我們可以通過字典的形式來表示這些位置

然后將數據放到列表中

# 存放每個合成缺口背景圖片的位置

那么

現在我們已經有了原始圖片

還知道了每個位置應該顯示原始圖片的什么部分

接下來我們就寫一個方法

用來合成圖片

# 寫入圖片

那么問題又來了

怎么合成啊

我們再看看一開始分析的圖片

這里圖片被分割成的每一個小圖片的尺寸是

10 * 58

所以我們也要將我們剛剛下載的原始圖片切割成相應的尺寸大小

而且

這張圖片是由上半部分的小圖片和下半部分的小圖片合成的

所以我們定義兩個 list 來裝這些小圖片

# 存放上下部分的各個小塊

然后將原始的圖片切割好放進去

image=Image.open(image_file)

至此

我們這兩個 list 就分別放好了各個切割的圖片了

那么接下來就創建一張空白的圖片

然后將小圖片一張一張（間距為10）的粘貼到空白圖片里

這樣我們就可以得到一張合成好的圖片了

# 創建一張大小一樣的圖片

那么到現在

我們可以得到網頁上顯示的那兩張圖片了

一張完全的圖片

一張帶缺口的圖片

接下來我們就要通過對比這兩張圖

看看我們要滑動的距離是多遠

# 合成圖片

可以通過圖片的 RGB 來計算

我們設定一個閾值

如果 r、g、b 大于這個閾值

我們就返回距離

def get_distance(bg_Image, fullbg_Image):

現在

我們知道了關鍵的滑動距離了

激動人心的時刻到了

我們使用 selenium

拿到滑塊的元素

然后根據這個距離拖動到缺口位置不就好了么

馬上打開 selenium 的文檔

看到了這個函數

它可以使用左鍵點擊元素

然后拖動到指定距離

最后釋放鼠標左鍵

knob=WAIT.until(EC.presence_of_element_located((By.CSS_SELECTOR, "#gc-box > div > div.gt_slider > div.gt_slider_knob.gt_show")))

運行一下試試看吧

妖怪吃了拼圖了

看來直接拖拽是不行的

試著拖完滑塊讓它睡一下再釋放

ActionChains(driver).click_and_hold(knob).perform()

發現拼圖還是特么的被妖怪吃了

有個叫勻速直線運動的東西

什么 加速度

什么 v=v0 + at

什么 s=?at2

什么鬼

回到正題

我們可以使用它來構造一個運動路徑

該加速時加速

該減速的時候減速

這樣的話就更像人類在滑動滑塊了

這次

我們使用這個軌跡來滑動

knob=WAIT.until(EC.presence_of_element_located((By.CSS_SELECTOR, "#gc-box > div > div.gt_slider > div.gt_slider_knob.gt_show")))

好了好了

我們再來運行一下吧

哈哈哈

成功識別了

當然了

成功率不是 100%

可以多調戲它幾次

以上就是識別滑動驗證碼的具體過程了

對于其它大部分的滑動驗證碼

也是可以使用這招搞定的

最后如果你依然在編程的世界里迷茫，不知道自己的未來規劃，對python感興趣，小編為初學者們準備的python入門教程！

請私信回復：“學習”就可以拿到一份我為大家準備的Python學習資料！希望能幫助你更了解python，學習python。

完整代碼：

lexslider是一款基于的jQuery內容滾動插件。可以使用它輕松實現各種圖片輪播效果、焦點圖效果。而且可以自動播放，使用導航按鈕和鍵盤來控制。可定制性非常高。

效果圖：

具有特征：

支持圖文混排，html元素。

支持滑動和淡入淡出效果。

支持水平、垂直方向滑動。

支持鍵盤方向鍵控制。

支持觸控滑動。

自適應屏幕尺寸。

可控制滑動單元個數。

更多選項設置和回調函數。

Flexslider的使用方法：

首先載入jquery庫文件和Flexslider插件，還有Flexslider所需的基本css樣式文件。

HTML代碼：

我們使用了.flexslider來包括所有需要滾動的內容元素，然后使用<ul class="slides">這個class非常關鍵，內部的滾動內容都是針對.slides的，然后在<li>內部加入任意html元素，包括圖片和文字。

JQuery調用Flexslider插件非常簡單，使用如下代碼：

參數選項：