記一次"截圖"功能的專案調研過程！

王心森發表於2020-09-23

目錄

專案需求

最近，專案接到了一個新需求，要求對指定URL進行後端模擬前端請求，對頁面進行截圖，具體要求如下：

  • 純後端模擬，不開啟前端頁面
  • 截全屏，也就是不管頁面有多長，都要擷取到一張圖片上
  • 只要求擷取瀏覽器DOM以內的部分，DOM以外不要擷取
  • 保證頁面不失真，頁面渲染與實際一直
  • 確保圖片清晰度
  • 能夠支援多併發請求

功能調研

接到專案需求後，我就對Java實現的截圖功能進行了一些前期調研，調研過程如下：

AWT

首先想到的是比較簡單的Root，它應用簡單，完全自動化，Java自帶功能，包名java.awt。於是編寫上手實驗：

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.event.KeyEvent;
import java.awt.image.BufferedImage;
import java.io.File;
import java.net.URL;

public class AWTTest {

    public static void main(String[] args) throws Exception {
        // 此方法僅適用於JdK1.6及以上版本
        Desktop.getDesktop().browse(new URL("http://www.baidu.com/").toURI());
        Robot robot = new Robot();
        robot.delay(10000);
        Dimension d = new Dimension(Toolkit.getDefaultToolkit().getScreenSize());
        int width = (int) d.getWidth();
        int height = (int) d.getHeight();
        // 最大化瀏覽器
        robot.keyRelease(KeyEvent.VK_F11);
        robot.delay(2000);
        Image image = robot.createScreenCapture(new Rectangle(0, 0, width, height));
        BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics g = bi.createGraphics();
        g.drawImage(image, 0, 0, width, height, null);
        // 儲存圖片
        ImageIO.write(bi, "jpg", new File("/data/test.jpg"));
    }
}

截圖效果：

AWT截圖

優勢：簡單易用，不需要任何第三方外掛。
缺點：不能同時處理大量資料，技術含量過低，屬於應急型技巧。

Swing

與AWT相比，Swing是基於awt的Java程式，包名javax.swing。它不僅提供了AWT的所有功能，還用純粹的Java程式碼對AWT的功能進行了大幅度的擴充。它是為解決AWT存在的問題而新開發的圖形介面包。

對Swing的測試，我們採用DJNativeSwing-SWT，它是java內嵌瀏覽器API，需要用到的依賴包有：

<dependency>
    <groupId>com.hynnet</groupId>
    <artifactId>DJNativeSwing</artifactId>
    <version>1.0.0</version>
</dependency>
<dependency>
    <groupId>com.hynnet</groupId>
    <artifactId>DJNativeSwing-SWT</artifactId>
    <version>1.0.0</version>
</dependency>
<dependency>
    <groupId>org.eclipse.swt.org.eclipse.swt.win32.win32.x86_64.4.3.swt</groupId>
    <artifactId>org.eclipse.swt.win32.win32.x86_64</artifactId>
    <version>4.3</version>
</dependency>

測試程式碼：

import chrriis.dj.nativeswing.swtimpl.NativeComponent;
import chrriis.dj.nativeswing.swtimpl.NativeInterface;
import chrriis.dj.nativeswing.swtimpl.components.JWebBrowser;
import chrriis.dj.nativeswing.swtimpl.components.WebBrowserAdapter;
import chrriis.dj.nativeswing.swtimpl.components.WebBrowserEvent;

import javax.imageio.ImageIO;
import javax.swing.*;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

public class SwingTest extends JPanel {
    private static final long serialVersionUID = 1L;

    // 行分隔符
    public final static String LS = System.getProperty("line.separator", "\n");
    // 檔案分割符
    public final static String FS = System.getProperty("file.separator", "\\");
    // 以javascript指令碼獲得網頁全屏後大小
    private final static StringBuffer JS_DIMENSION;

    static {
        JS_DIMENSION = new StringBuffer();
        JS_DIMENSION.append("var width = 0;").append(LS);
        JS_DIMENSION.append("var height = 0;").append(LS);
        JS_DIMENSION.append("if(document.documentElement) {").append(LS);
        JS_DIMENSION.append("  width = Math.max(width, document.documentElement.scrollWidth);").append(LS);
        JS_DIMENSION.append("  height = Math.max(height, document.documentElement.scrollHeight);").append(LS);
        JS_DIMENSION.append("}").append(LS);
        JS_DIMENSION.append("if(self.innerWidth) {").append(LS);
        JS_DIMENSION.append("  width = Math.max(width, self.innerWidth);").append(LS);
        JS_DIMENSION.append("  height = Math.max(height, self.innerHeight);").append(LS);
        JS_DIMENSION.append("}").append(LS);
        JS_DIMENSION.append("if(document.body.scrollWidth) {").append(LS);
        JS_DIMENSION.append("  width = Math.max(width, document.body.scrollWidth);").append(LS);
        JS_DIMENSION.append("  height = Math.max(height, document.body.scrollHeight);").append(LS);
        JS_DIMENSION.append("}").append(LS);
        JS_DIMENSION.append("return width + ':' + height;");
    }

    public SwingTest(final String url, final String fileName) {
        super(new BorderLayout());
        JPanel webBrowserPanel = new JPanel(new BorderLayout());
        final JWebBrowser webBrowser = new JWebBrowser(null);
        webBrowser.setBarsVisible(false);
        webBrowser.navigate(url);
        webBrowserPanel.add(webBrowser, BorderLayout.CENTER);
        add(webBrowserPanel, BorderLayout.CENTER);
        JPanel panel = new JPanel(new FlowLayout(FlowLayout.CENTER, 4, 4));
        webBrowser.addWebBrowserListener(new WebBrowserAdapter() {
            @Override
            public void loadingProgressChanged(WebBrowserEvent e) {
                // 當載入完畢時
                if (e.getWebBrowser().getLoadingProgress() == 100) {
                    String result = (String) webBrowser.executeJavascriptWithResult(JS_DIMENSION.toString());
                    int index = result == null ? -1 : result.indexOf(":");
                    NativeComponent nativeComponent = webBrowser.getNativeComponent();
                    Dimension originalSize = nativeComponent.getSize();
                    Dimension imageSize = new Dimension(Integer.parseInt(result.substring(0, index)), Integer.parseInt(result.substring(index + 1)));
                    imageSize.width = Math.max(originalSize.width, imageSize.width + 50);
                    imageSize.height = Math.max(originalSize.height, imageSize.height + 50);
                    nativeComponent.setSize(imageSize);
                    BufferedImage image = new BufferedImage(imageSize.width, imageSize.height, BufferedImage.TYPE_INT_RGB);
                    nativeComponent.paintComponent(image);
                    nativeComponent.setSize(originalSize);
                    try {
                        // 輸出影像
                        ImageIO.write(image, "PNG", new File(fileName));
                    } catch (IOException ex) {
                        ex.printStackTrace();
                    }
                    // 退出操作
                    System.exit(0);
                }
            }
        });
        add(panel, BorderLayout.SOUTH);
    }

    public static void main(String[] args) {
        NativeInterface.open();
        SwingUtilities.invokeLater(() -> {
            // SWT元件轉Swing元件，不初始化父窗體將無法啟動webBrowser
            JFrame frame = new JFrame("以DJ元件儲存指定網頁截圖");

            // 實際專案中傳入URL引數，根據不同引數擷取不同網頁快照，儲存地址也可以在構造器中多設定一個引數，儲存到指定目錄
            frame.getContentPane().add(new SwingTest("https://www.baidu.com/", "/data/test.png"), BorderLayout.CENTER);
            frame.setSize(1024, 1024);

            // 僅初始化，但不顯示
            frame.invalidate();
            frame.pack();
            frame.setVisible(false);
        });
        NativeInterface.runEventPump();
    }
}

截圖效果：

Swing截圖

Swing控制元件是改善為了AWT控制元件而發展出來的輕量級GUI控制元件，採用的是Composite設計模式，然而，由於沒有清楚的分隔元件（Component）和容器（Container）的邊界，就造成了Swing的幾乎每個單獨的元件都是一個容器，能夠新增其他容器或者元件，其功能非常強大，但也存在以下一些的問題：

  • 與直覺不太一致：Swing的GUI上的各種元件如果新增的皮膚過多的話，就造成各個元件的層次很深，處理類似focus管理這樣的問題就很麻煩，座標的轉換也很複雜，由於父子關係過多，您不看程式碼只看GUI，憑直覺難以區分元件的父子關係。
  • 佈局上的困難：使用Swing開發介面的程式設計師會發現，即使Swing提供了這麼多佈局管理器，然而您想通過這些佈局管理器做出很專業的介面卻非常難，因為佈局管理器非常依賴父容器和子元件的各種狀態，儘管Swing最新的版本提供了類似元件和容器間隔的方法，然而還沒有被大部分佈局管理器採用，其實並不是佈局管理器不夠強大的問題，事實上，很多專業的介面需要從元件級別做出良好的定義，另外，不少Swing元件會根據容器的大小進行繪製，這也造成了很多不確定性，很多人喜歡使用NullLayout，可能就是這個原因，客戶需要的是一個穩定的，可預知的介面，如果使用了佈局管理器，會發現介面在不同的系統下展示的不同
  • 使用上的困擾：Swing元件本身由於不能分清是元件還是容器，很多容器方法比如setEnabled就沒有效果，需要寫程式碼遍歷所有子元件，呼叫所 有的子元件相同的方法，而類似設定透明的方法也有這個問題，如果設定某個容器透明，也需要設定所有的子元件的透明屬性，元件和容器的很多方法沒有很好的定 義，這對了解Swing結構的人不是問題，但是對於熟悉別的ＧＵＩ類庫的人就產生了很大的困惑，因為不少容器上的方法呼叫後是沒有效果的。

總得來說，對Composite設計模式應該慎用，如果一定要用，一定要良好的定義元件（Component）和容器（Container）的邊界，避免很多功能陷入沒有意義的父子遍歷例程，增加了複雜性。

Html2Image

Html2Image是一個將html轉成圖片的工具，它在html轉圖片的領域使用率是不低的。引入依賴：

<dependency>
    <groupId>gui.ava</groupId>
    <artifactId>html2image</artifactId>
    <version>0.9</version>
</dependency>

測試程式碼：

import gui.ava.html.image.generator.HtmlImageGenerator;

public class Html2Image {

    public static void main(String[] arg) throws Exception {
        String html = "<table width='654' cellpadding='0' cellspacing='0' bordercolor='#FFFFFF'><tr><td><img src='https://images.cnblogs.com/cnblogs_com/ason-wxs/1814743/o_200727072807xiaoxiong.jpg'/></td><td><img src='https://images.cnblogs.com/cnblogs_com/ason-wxs/1814743/o_200727072807xiaoxiong.jpg'/></td></tr><tr><td><img src='https://images.cnblogs.com/cnblogs_com/ason-wxs/1814743/o_200727072807xiaoxiong.jpg'/></td><td><img src='https://images.cnblogs.com/cnblogs_com/ason-wxs/1814743/o_200727072807xiaoxiong.jpg'/></td></tr></table>";
        HtmlImageGenerator imageGenerator = new HtmlImageGenerator();
        imageGenerator.loadHtml(html);
        Thread.sleep(5000);
        imageGenerator.saveAsImage("/data/test.png");
        Thread.sleep(5000);
    }
}

測試程式碼比較簡單，手繪了一個Table，放入兩行圖片，看一下效果：

Html2Image截圖

所以，Html2Image的缺點也很明顯：

  • 當你的html頁面引入外部的CSS檔案以及JS檔案，生成的圖片是無法帶有這些動態效果的。也就是說，它不支援複雜的動態特性，只能支援寫在html程式碼裡的css效果。
  • 當html程式碼裡帶有圖片時，生成的程式必須有一定的等待時間，否則生成的圖片會有空白，所以需要設法在程式碼生成圖片前讓程式等待一會，比如Thread.sleep(8000)。
  • 除錯不易，很容易出現圖不清楚、有邊框、字型被洗白等等情況。
  • ...

PhantomJS

PhantomJS是一個可程式設計的無頭瀏覽器。適用於頁面自動化，網頁監控，網路爬蟲等：

  • 頁面自動化測試：希望自動的登陸網站並做一些操作然後檢查結果是否正常。
  • 網頁監控：希望定期開啟頁面，檢查網站是否能正常載入，載入結果是否符合預期。載入速度如何等。
  • 網路爬蟲：獲取頁面中使用js來下載和渲染資訊，或者是獲取連結處使用js來跳轉後的真實地址。

PhantomJS官網下載地址：http://phantomjs.org/，下載後可以直接解壓使用！

測試程式碼：

import lombok.extern.slf4j.Slf4j;
import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.StringUtils;

import java.io.File;
import java.io.IOException;

/**
 * Title 網頁轉圖片處理類
 *
 * @author Ason(18078490)
 * @date 2020-08-03
 */
@Slf4j
public class PhantomTools {

    /**
     * 可執行檔案phantomjs.exe路徑
     */
    private final String phantomjsPath;
    /**
     * 快照圖生成JS路徑
     */
    private final String rasterizePath;
    /**
     * 截圖間隔時間
     * 考慮報表渲染最大耗時，設定預設請求時間為90s
     */
    private String timeout = String.valueOf(90 * 1000);

    /**
     * 構造引數
     * 獲取phantomjs路徑
     */
    public PhantomTools() {
        String bootPath = new File(this.getClass().getResource("/").getPath()).getPath();
        phantomjsPath = String.join(File.separator, bootPath, "tool", "phantomjs", "phantomjs-2.1.1-windows", "bin", "phantomjs");
        rasterizePath = String.join(File.separator, bootPath, "tool", "phantomjs", "phantomjs-2.1.1-windows", "examples", "rasterize.js");
        String externalIntervalTime = "2000";
        if (StringUtils.isNotBlank(externalIntervalTime)) {
            timeout = externalIntervalTime;
        }
    }

    /**
     * 根據URL生成指定fileName的位元組陣列
     *
     * @param fileName 圖片名稱
     * @param url      請求URL
     * @param size     指定圖片尺寸，例如：1000px*800px
     */
    public void screenshot(String fileName, String url, String size) {
        // 替換URL中特殊字元
        String parsedUrl = StringUtils.replace(url, "&", "\"&\"");
        try {
            // 執行快照命令
            String command = String.join(StringUtils.SPACE, phantomjsPath, rasterizePath, parsedUrl, fileName, timeout, size);
            log.info("[執行命令：{}]", command);
            // 執行命令操作
            Process process = Runtime.getRuntime().exec(command);
            // 一直掛起，直到子程式執行結束，返回值0表示正常退出
            if (process.waitFor() != 0 || process.exitValue() != 1) {
                log.error("[執行本地Command命令失敗]");
                return;
            }
            // 返回圖片
            FileUtils.getFile(fileName);
        } catch (IOException | InterruptedException e) {
            log.error("[圖片生成失敗]", e);
        }
    }

    /**
     * 測試方法
     *
     * @param arg 引數
     * @throws IOException 異常
     */
    public static void main(String[] arg) throws IOException {
        String url = "http://www.baidu.com";
        PhantomTools phantomTools = new PhantomTools();
        phantomTools.screenshot("/data/test.png", url, "1200px");
    }
}

截圖效果：

PhantomJS截圖

關於PhantomJS的具體使用，可以參考：Phantomjs實現後端將URL轉換為圖片

PhantomJS作為一款強大的命令列工具，可以勝任多種自動化測試、監控等工作，但很可惜，隨著Google在Chrome 59版本放出了headless模式，Ariya Hidayat決定放棄對Phantom.js的維護，這也標示著Phantom.js 統治fully functional headless browser的時代將被chrome-headless代替了。

PhantomJS缺點：

  • 將近2k的issue，仍然需要人去修復。
  • Javascript天生單執行緒的弱點，需要用非同步方式來模擬多執行緒，隨之而來的callback地獄，對於新手而言非常痛苦，不過隨著es6的廣泛應用，我們可以用promise來解決多重巢狀回撥函式的問題。
  • 雖然webdriver支援htmlunit與phantomjs，但由於沒有任何介面，當我們需要進行除錯或復現問題時，就非常麻煩。

Headless Chrome

Headless Browser意思是沒有頁面的瀏覽器，多用於測試web、截圖、影像對比、測試前端程式碼、爬蟲（雖然很慢)、監控網站效能等。其優點如下：

對於UI自動化測試，少了真實瀏覽器載入css，js以及渲染頁面的工作。無頭測試要比真實瀏覽器快的多。
可以在無介面的伺服器或CI上執行測試，減少了外界的干擾，使自動化測試更穩定。
在一臺機器上可以模擬執行多個無頭瀏覽器，方便進行併發測試。

PhantomJS曾經就是一款優秀的Headless瀏覽器，但由於其多項缺點，在Headless Browser領域正在逐漸被chrome-headless取替。

Headless Chrome是Chrome瀏覽器的無介面形態，可以在不開啟瀏覽器的前提下，使用所有Chrome支援的特性，在命令列中執行你的指令碼。相比於其他瀏覽器，Headless Chrome能夠更加便捷的執行web自動化測試、編寫爬蟲、擷取圖等功能。它的出現就是來代替PhantomJS的。

Headless Chrome優點：

  • 比phantomjs有更快更好的效能。
  • Headless Chrome要比現phantomjs更加快速的完成任務，且佔用記憶體更少。
  • 有谷歌平臺維護，不會出現2k的issue情況。
  • 支援ECMAScript 2017 (ES8)，我們也可以使用最新的js語法來編寫的指令碼，例如async，await等。
  • 完全真實的瀏覽器操作，chrome headless支援所有chrome特性。
  • 除錯便利。我們只需要在命令列中加入–remote-debugging-port=9222，再開啟瀏覽器輸入ip:9222就能進入除錯介面。

我們採用selenium + headless chrome來做個程式碼測試：

import lombok.extern.slf4j.Slf4j;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

import java.io.File;
import java.util.concurrent.TimeUnit;

/**
 * Title 截圖工具
 *
 * @author Ason(18078490)
 * @date 2020-09-03
 */
@Slf4j
public class Test {

    static {
        System.setProperty("webdriver.chrome.driver", "/tigbs-assist/chromedriver_win32/chromedriver.exe");
    }

    public static void main(String[] arg) throws Exception {
        // 配置Chrome引數
        ChromeOptions options = new ChromeOptions();
        options.setBinary("/chrome-win/chrome.exe");
        options.addArguments("--headless");
        options.addArguments("--disable-gpu");
        options.addArguments("--no-sandbox");
        options.addArguments("--disable-dev-shm-usage");
        options.addArguments("--hide-scrollbars");
        WebDriver driver = null;
        try {
            driver = new ChromeDriver(options);
            driver.manage().timeouts().implicitlyWait(5, TimeUnit.MINUTES).setScriptTimeout(5, TimeUnit.MINUTES).pageLoadTimeout(5, TimeUnit.MINUTES);
            // 開啟網頁
            driver.get("http://www.baidu.com/");
            Thread.sleep(5000);
            // 圖片寫入到test.png
            File file = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
            FileUtils.copyFile(file, new File("/data/test.png"));
        } finally {
            // 關閉瀏覽器驅動
            if (driver != null) {
                driver.quit();
            }
        }
    }
}

Chrome瀏覽器與驅動需要相對應，對應關係可以查詢：ChromeDriver與Chrome版本對應參照表及ChromeDriver下載連結
Chrome瀏覽器下載地址：Chrome Download

實現方案

針對本期需求功能點做對比，以上幾種方案中，只有Chrome Headless模式可以滿足要求，既能保證截圖功能的實現，又適合以後專案的擴充套件！

針對Chrome Headless的選用方案，我們採用Selenium Server服務，服務端基於Selenium的Grid元件來搭建截圖功能。

Selenium Server目前採用2.42版本，圖片伺服器為5臺Windows系統虛機，專案架構圖如下：

Selenium Grid

專案結構有5臺Node節點，1臺Hub，Hub與其中一臺Node共享虛機。啟動模式採用standalone模式，啟動檔案：selenium-server-standalone-2.42.0.jar。

Node節點安裝的Web服務均採用Chrome瀏覽器實現，瀏覽器版本71.0.3557.0（開發者內部版本）（64 位），瀏覽器驅動版本2.46。

通過以上配置，完全可以滿足本次專案開發需求，實現了完整的功能特點！

結論

Selenium + Chrome Headless是瀏覽器操作的最便捷方式，完全相容Chrome瀏覽器所有功能特點，是今後設計瀏覽器開發工作中的必備手段！

關於Selenium想了解的同學，可以參考官方文件，這裡不做具體介紹！

相關文章