利用Java+Selenium+OpenCV模擬實現網頁滑動驗證

目前很多網頁都有滑動驗證,目的就是防止不良爬蟲扒他們網站的數據,我這次本著學習的目的使用Java和selenium學習解決滑動驗證的問題,前前後後花瞭一周時間(抄代碼),終於成功瞭某音的滑動驗證!

效果展示:

一、需求分析

要模擬滑動驗證總共就兩步:

1、找到小滑塊

2、按住小滑塊,滑動一段距離

第一步很簡單,直接通過xPath找到,比較重要和困難的是第二步中距離的問題,我花瞭那麼多的時間在這次學習中,主要是耗在計算需要滑動的距離。

在面向百度編程的過程中看到瞭很多學習資料,大體上是同一個方法:使用opencv計算機視覺工具讓兩張處理過的圖像進行比對,從而計算出滑動的距離。

二、模擬步驟

1、使用selenium打開某音網頁

直接打開

2、找到小滑塊以及小滑塊所在的背景圖

打開前端調式工具,F12,定位小滑塊和背景圖的位置,復制xpath,然後用selenium查找元素

eg: driver.findElement(By.xpath("小滑塊的xpath"));

3、計算小滑塊需要滑動的距離

這一部分是最重要的,所以需要重點記錄,學習一次,以後遇到同樣的問題就能馬上解決。

步驟:

1、保存小滑塊圖像和小滑塊背景圖

如圖,使用selenium可以很方便的獲取到這兩張圖片。

2、將背景圖進行指定比例和區域的剪裁

在這一步中有兩個比較重要的參數:

1、小滑塊的top值

2、網頁當前顯示的圖像和原圖像的大小比例,在計算滑動距離需要用到

剪裁用的是 BufferedImage的getSubimage方法,一共有四個參數

image = image.getSubimage(x, y, width, height);

x和y 為截圖後圖片左上角的坐標值,如果x和y都是0,那麼就從原圖的左上角開始截起,width和height分別是截圖後圖片的長和寬。

在某音的滑動驗證中,x設置成小滑塊的寬度,y設置為小滑塊的top,top也就是小滑塊距離背景圖上邊界的像素

width設置為背景圖原來的寬度-小滑塊的寬度

height設置為小滑塊的高度

最後截出來的圖片類似這樣,一定要把背景圖的缺口包含進去

3、將小滑塊圖像二值化

從這裡開始要用到opencv(開源計算機視覺庫)

首先將保存的小滑塊圖片轉灰度,然後將轉灰度的下滑快二值化,二值化就是非黑即白,瞭解過後才知道目前很多機器識別使用的原理和這個差不多。

代碼如下:

           //小滑塊Mat對象
           Mat s_mat = Imgcodecs.imread(sFile.getPath());
 
           // 轉灰度圖像
           Mat s_newMat = new Mat();
           Imgproc.cvtColor(s_mat, s_newMat, Imgproc.COLOR_BGR2GRAY);
           // 二值化圖像
           binaryzation(s_newMat);binaryzation是一個方法,在源碼中有
           Imgcodecs.imwrite(sFile.getPath(), s_newMat);

4、將二值化的小滑塊和剪裁的背景圖進行比對

代碼我是抄的,看不懂,就不放在這瞭。

我研究瞭好久,因為沒有學習過opencv,計算過程調用的幾個方法我還不是很懂,但是最後的返回值需要根據實際情況來調整,要不然驗證成功率幾乎為0。

4、按住小滑塊並滑動

滑動過程不能讓程序一步走完,不然網頁會認為你是爬蟲,即使能滑到指定位置也會驗證失敗。滑動過程應該盡量模擬人工操作。

     /**
     * 模擬移動滑塊
     * @param driver
     * @param ele 小滑塊
     * @param distance 滑動距離
     */
    public void move(ChromeDriver driver,WebElement ele,int distance) {
        int randomTime = 0;
        if (distance > 90) {
            randomTime = 250;
        } else if (distance > 80 && distance <= 90) {
            randomTime = 150;
        }
        List<Integer> track = getMoveTrack(distance - 2);
        int moveY = 1;
        try {
            Actions actions = new Actions(driver);
            actions.clickAndHold(ele).perform();
            Thread.sleep(200);
            for (int i = 0; i < track.size(); i++) {
                actions.moveByOffset(track.get(i), moveY).perform();
                Thread.sleep(new Random().nextInt(300) + randomTime);
            }
            Thread.sleep(200);
            actions.release(ele).perform();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
 
    /**
     * 根據距離獲取滑動軌跡
     * @param distance 需要移動的距離
     * @return
     */
    public static List<Integer> getMoveTrack(int distance) {
        List<Integer> track = new ArrayList<>();// 移動軌跡
        Random random = new Random();
        int current = 0;// 已經移動的距離
        int mid = distance * 4 / 5;// 減速閾值
        int a = 0;
        int move = 0;// 每次循環移動的距離
        while (true) {
            a = random.nextInt(10);
            if (current <= mid) {
                move += a;// 不斷加速
            } else {
                move -= a;
            }
            if ((current + move) < distance) {
                track.add(move);
            } else {
                track.add(distance - current);
                break;
            }
            current += move;
        }
        return track;
    }

三、學習過程中比較棘手的問題

1、截圖問題

我一開始截出來的圖包含的小滑塊缺口總是不完整的,經過一番截圖參數調試後,我發現某音小滑塊top的單位他丫的是em,這像素的大小用em???真不愧是某音,別傢都是px,你偏偏要em……然後我又開始面向百度,最後得到的結論是默認瀏覽器1em = 10px,我在top *10之後還是截不到完整的小滑塊缺口。

我這會直接上網頁調試工具,最終調式出來1em約等於100px,最後top *100截出來的圖片就對瞭。

2、返回結果與實際滑動距離相差太多,甚至無規律可循

好不容易把代碼敲完,之後的測試卻一直是失敗的,無論在計算的結果加減乘除某個數值都不行。

導致原因:因為在網頁上顯示的圖片和實際上圖片大小是不同的,依靠opencv比對計算出來的滑動距離是按照原圖大小計算的。

解決辦法:隻需要將返回值乘上顯示圖片與原圖寬度的比例即可。

註意:因為之前在獲取小滑塊圖像時,top的值為網頁顯示的大小,計算過程中是按照原圖大小計算的,所以獲取的top值乘以100後還要乘上原圖寬度與顯示圖像寬度的比例。

3、openCV的下載安裝

官網實在是太慢瞭,直接搜索安裝包下載瞭。

四、總結

這次學習經歷前後共花瞭一周,恰逢考試周,考試科目大多沒有復習好,也不知是不是虧瞭,滑動驗證是網頁登錄或者搜索會經常遇到的問題,模擬滑動解鎖主要能夠鍛煉我們解決問題的能力。

圖像在計算機中實際是一個個像素組成的,每一個像素包含三個數值,所以才能夠對圖像進行二值化、比對。比對過程是在看不懂,不過也不必每一行代碼都看懂,能夠解決問題才是最重要的。

以下為源碼(僅用於學習交流):

package indi.imitateslide;
 
import org.apache.commons.io.FileUtils;
import org.opencv.core.*;
import org.opencv.imgcodecs.Imgcodecs;
import org.opencv.imgproc.Imgproc;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
 
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
 
 
/**
 * 自動化模擬滑動驗證
 */
public class ImitateSlide {
    //驅動
    private ChromeDriver driver;
 
    public ImitateSlide(ChromeDriver driver){
        this.driver = driver;
    }
 
    public void slide(String url,String sliderXpath) throws Exception {
        driver.get(url);
        Thread.sleep(2000);
 
        //獲取滑塊
        WebElement ele = waitWebElement(driver,By.xpath(sliderXpath),500);
 
        //獲取滑動背景圖
        String bUrl = waitWebElement(driver,By.xpath("//*[@id=\"captcha-verify-image\"]"),500).getAttribute("src");
        //獲取小滑塊圖片
        String sUrl = waitWebElement(driver,By.xpath("//*[@id=\"captcha_container\"]/div/div[2]/img[2]"),500).getAttribute("src");
        //獲取高度
        String topStr = waitWebElement(driver,By.xpath("//*[@id=\"captcha_container\"]/div/div[2]/img[2]"),500).getAttribute("style").substring(16,20);
        System.out.println("字符串高度是: "+topStr);
        double dTop = Double.parseDouble(topStr);
        dTop *= 160;
        int top = (int) dTop;
        System.out.println("最終高度是: "+top);
 
        //計算移動的距離
        double dDis = Double.parseDouble(getDistance(bUrl,sUrl,top));
        System.out.println("計算出的距離為: "+dDis);
        int distance = (int) dDis;
        System.out.println("最終移動的距離為: "+distance);
        Thread.sleep(500);
        //滑動
        move(driver,ele,distance);
        Thread.sleep(1000);
        driver.quit();
    }
 
    /**
     * 模擬移動滑塊
     * @param driver
     * @param ele
     * @param distance
     */
    public void move(ChromeDriver driver,WebElement ele,int distance) {
        int randomTime = 0;
        if (distance > 90) {
            randomTime = 250;
        } else if (distance > 80 && distance <= 90) {
            randomTime = 150;
        }
        List<Integer> track = getMoveTrack(distance - 2);
        int moveY = 1;
        try {
            Actions actions = new Actions(driver);
            actions.clickAndHold(ele).perform();
            Thread.sleep(200);
            for (int i = 0; i < track.size(); i++) {
                actions.moveByOffset(track.get(i), moveY).perform();
                Thread.sleep(new Random().nextInt(300) + randomTime);
            }
            Thread.sleep(200);
            actions.release(ele).perform();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
 
    /**
     * 根據距離獲取滑動軌跡
     * @param distance 需要移動的距離
     * @return
     */
    public static List<Integer> getMoveTrack(int distance) {
        List<Integer> track = new ArrayList<>();// 移動軌跡
        Random random = new Random();
        int current = 0;// 已經移動的距離
        int mid = distance * 4 / 5;// 減速閾值
        int a = 0;
        int move = 0;// 每次循環移動的距離
        while (true) {
            a = random.nextInt(10);
            if (current <= mid) {
                move += a;// 不斷加速
            } else {
                move -= a;
            }
            if ((current + move) < distance) {
                track.add(move);
            } else {
                track.add(distance - current);
                break;
            }
            current += move;
        }
        return track;
    }
 
    /**
     * 獲取滑塊移動的距離
     * @param bUrl 滑動背景圖
     * @param sUrl 小滑塊
     * @param top 高度
     * @return
     */
    public String getDistance(String bUrl, String sUrl, int top) {
        System.loadLibrary( Core.NATIVE_LIBRARY_NAME );
        File bFile = new File("D:\\douyin_b1.jpg");
        File sFile = new File("D:\\douyin_s1.jpg");
        try {
            //將圖片復制保存到指定路徑
            FileUtils.copyURLToFile(new URL(bUrl), bFile);
            FileUtils.copyURLToFile(new URL(sUrl), sFile);
 
            BufferedImage bgBI = ImageIO.read(bFile);
            BufferedImage sBI = ImageIO.read(sFile);
 
            // 裁剪
            System.out.println("背景圖片的寬度是: "+bgBI.getWidth());
            System.out.println("小圖片的高度是:"+sBI.getHeight());
            bgBI = bgBI.getSubimage(sBI.getWidth(), top, bgBI.getWidth() - 110, sBI.getHeight());
            ImageIO.write(bgBI, "png", bFile);
 
            Mat s_mat = Imgcodecs.imread(sFile.getPath());
            Mat b_mat = Imgcodecs.imread(bFile.getPath());
 
            // 轉灰度圖像
            Mat s_newMat = new Mat();
            Imgproc.cvtColor(s_mat, s_newMat, Imgproc.COLOR_BGR2GRAY);
 
            // 二值化圖像
            binaryzation(s_newMat);
            Imgcodecs.imwrite(sFile.getPath(), s_newMat);
 
            //讓兩張圖片進行比對
            int result_rows = b_mat.rows() - s_mat.rows() + 1;
            int result_cols = b_mat.cols() - s_mat.cols() + 1;
            Mat g_result = new Mat(result_rows, result_cols, CvType.CV_32FC1);
            Imgproc.matchTemplate(b_mat, s_mat, g_result, Imgproc.TM_SQDIFF); // 歸一化平方差匹配法
            // 歸一化相關匹配法
            Core.normalize(g_result, g_result, 0, 1, Core.NORM_MINMAX, -1, new Mat());
 
            //以下看不懂
            Point matchLocation = new Point();
            Core.MinMaxLocResult mmlr = Core.minMaxLoc(g_result);
            matchLocation = mmlr.maxLoc; // 此處使用maxLoc還是minLoc取決於使用的匹配算法
            Imgproc.rectangle(b_mat, matchLocation,
                    new Point(matchLocation.x + s_mat.cols(), matchLocation.y + s_mat.rows()), new Scalar(0, 255, 0, 0));
            //返回值就是要移動的距離,在這裡需要加上被裁剪掉的寬度再減去小滑塊的寬度,最後乘上相應的比例。
            return "" + ((matchLocation.x + s_mat.cols()) / 1.62);
        } catch (Throwable e) {
            e.printStackTrace();
            return null;
        } finally {
            //刪除保存的滑塊以及背景圖片
            bFile.delete();
            sFile.delete();
        }
    }
 
    /**
     * 將圖像二值化,固定代碼
     * @param mat
     */
    public static void binaryzation(Mat mat) {
        int BLACK = 0;
        int WHITE = 255;
        int ucThre = 0, ucThre_new = 127;
        int nBack_count, nData_count;
        int nBack_sum, nData_sum;
        int nValue;
        int i, j;
        int width = mat.width(), height = mat.height();
        // 尋找最佳的闕值
        while (ucThre != ucThre_new) {
            nBack_sum = nData_sum = 0;
            nBack_count = nData_count = 0;
 
            for (j = 0; j < height; ++j) {
                for (i = 0; i < width; i++) {
                    nValue = (int) mat.get(j, i)[0];
 
                    if (nValue > ucThre_new) {
                        nBack_sum += nValue;
                        nBack_count++;
                    } else {
                        nData_sum += nValue;
                        nData_count++;
                    }
                }
            }
            nBack_sum = nBack_sum / nBack_count;
            nData_sum = nData_sum / nData_count;
            ucThre = ucThre_new;
            ucThre_new = (nBack_sum + nData_sum) / 2;
        }
        // 二值化處理
        int nBlack = 0;
        int nWhite = 0;
        for (j = 0; j < height; ++j) {
            for (i = 0; i < width; ++i) {
                nValue = (int) mat.get(j, i)[0];
                if (nValue > ucThre_new) {
                    mat.put(j, i, WHITE);
                    nWhite++;
                } else {
                    mat.put(j, i, BLACK);
                    nBlack++;
                }
            }
        }
        // 確保白底黑字
        if (nBlack > nWhite) {
            for (j = 0; j < height; ++j) {
                for (i = 0; i < width; ++i) {
                    nValue = (int) (mat.get(j, i)[0]);
                    if (nValue == 0) {
                        mat.put(j, i, WHITE);
                    } else {
                        mat.put(j, i, BLACK);
                    }
                }
            }
        }
    }
 
    /**
     * 元素延時加載,等到元素出現時返回該元素,超過500*0.05s後無響應則拋出NOSuchElement異常
     * @param driver
     * @param by
     * @param count
     * @return WebElement
     * @throws Exception
     */
    private static WebElement waitWebElement(WebDriver driver, By by, int count) throws Exception {
        WebElement webElement = null;
        boolean isWait = false;
        for (int k = 0; k < count; k++) {
            try {
                webElement = driver.findElement(by);
                if (isWait)
                    System.out.println(" ok!");
                return webElement;
            } catch (org.openqa.selenium.NoSuchElementException ex) {
                isWait = true;
                if (k == 0)
                    System.out.print("waitWebElement(" + by.toString() + ")");
                else
                    System.out.print(".");
                Thread.sleep(50);
            }
        }
        if (isWait)
            System.out.println(" outTime!");
        return null;
    }
}

到此這篇關於利用Java+Selenium+OpenCV模擬實現網頁滑動驗證的文章就介紹到這瞭,更多相關Java Selenium OpenCV滑動驗證內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: