如何使用Java和Selenium將不同高度的HTML頁面完整轉換為圖片？

Java與Selenium：完整截取任意高度html頁面

本文詳細介紹如何使用java和selenium庫，克服高度限制，完整截取html頁面并將其轉換為圖片。 傳統方法在處理高頁面時容易出現內容缺失，本文提供一種分段截圖并拼接的解決方案。 我們將使用jdk 8和selenium-java (3.141.59)版本進行演示。

挑戰：高頁面截圖的難題

對于較矮的頁面，直接截圖即可。但高頁面則不然。單純使用window.scrollby(0, x)滾動并截圖，常常導致部分內容丟失，例如某些行號的內容可能無法完整顯示。

解決方案：分段截圖，完美拼接

立即學習“Java免費學習筆記（深入）”；

我們的策略是將頁面分割成多個部分，分別截圖，最后再將這些圖片拼接成一張完整的長圖。 關鍵在于每次滾動的高度略小于截圖的高度，確保部分圖片重疊，避免內容丟失。

步驟詳解：

1. 環境配置： 設置chromeDriver路徑并配置Chrome選項，啟用無頭模式（headless）提高效率，并設置窗口大小。

   String chromepath = "d:htmltoimgseleniumchromedriver-win64chromedriver.exe"; System.setProperty("webdriver.chrome.driver", chromepath);  ChromeOptions options = new ChromeOptions(); options.addArguments("--headless"); options.addArguments("--window-size=2160,1440");  WebDriver driver = new ChromeDriver(options);

2. 頁面加載與等待： 加載HTML文件，并使用顯式等待確保頁面完全加載完畢。

   driver.get("file:///d:/htmltoimg/test.html"); WebDriverWait wait = new WebDriverWait(driver, 15); wait.until(ExpectedConditions.visibilityOfElementLocated(By.tagName("body")));

3. 計算截圖次數： 使用JavaScript獲取頁面總高度，并根據每次截圖的高度計算需要截圖的次數。

   JavascriptExecutor js = (JavascriptExecutor) driver; long pageHeight = (long) js.executeScript("return document.body.scrollHeight;"); int captureHeight = 5000; // 每次截取的高度 int numberOfScreenshots = (int) Math.ceil((double) pageHeight / captureHeight);

4. 分段截圖與滾動： 循環截圖，每次截圖后，使用JavaScript滾動頁面。滾動距離略小于截圖高度，確保重疊。

   int totalHeight = 0; List<File> files = new ArrayList<>(); for (int i = 0; i < numberOfScreenshots; i++) {     // ... (截圖代碼，保存為臨時文件并添加到files列表) ...     js.executeScript("window.scrollBy(0," + (captureHeight - 100) + ")"); // 滾動，留出部分重疊 }

5. 圖片拼接： 讀取所有臨時圖片，計算總寬度，并將圖片繪制到一個新的BufferedImage對象中。

   int width = 0; for (File file : files) {     BufferedImage img = ImageIO.read(file);     width = Math.max(img.getWidth(), width); }  BufferedImage combinedImage = new BufferedImage(width, totalHeight, BufferedImage.TYPE_INT_ARGB); Graphics2D g = combinedImage.createGraphics();  int nowYIndex = 0; for (File file : files) {     BufferedImage img = ImageIO.read(file);     g.drawImage(img, 0, nowYIndex, null);     nowYIndex += img.getHeight(); }  g.dispose(); ImageIO.write(combinedImage, "PNG", new File("D:htmlToImgSeleniumoutputmerge.png"));

通過以上步驟，即可完整截取任意高度的HTML頁面，生成一張完整的圖片。 記得補充截圖和文件刪除的代碼，以及必要的異常處理。 此方法高效且可靠，解決了傳統方法在高頁面截圖時遇到的內容缺失問題。