如何使用Java和Selenium将不同高度的HTML页面完整转换为图片？

Java与Selenium：完整截取任意高度HTML页面

本文详细介绍如何使用java和selenium库，克服高度限制，完整截取html页面并将其转换为图片。 传统方法在处理高页面时容易出现内容缺失，本文提供一种分段截图并拼接的解决方案。 我们将使用jdk 8和selenium-java (3.141.59)版本进行演示。

挑战：高页面截图的难题

对于较矮的页面，直接截图即可。但高页面则不然。单纯使用window.scrollby(0, x)滚动并截图，常常导致部分内容丢失，例如某些行号的内容可能无法完整显示。

解决方案：分段截图，完美拼接

立即学习“Java免费学习笔记（深入）”；

我们的策略是将页面分割成多个部分，分别截图，最后再将这些图片拼接成一张完整的长图。 关键在于每次滚动的高度略小于截图的高度，确保部分图片重叠，避免内容丢失。

步骤详解：

炉米Lumi

字节跳动推出的AI模型分享社区和模型训练平台

下载

1. 环境配置： 设置ChromeDriver路径并配置Chrome选项，启用无头模式（headless）提高效率，并设置窗口大小。

   String chromepath = "d:\\htmltoimg\\selenium\\chromedriver-win64\\chromedriver.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 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:\\htmlToImg\\Selenium\\output\\merge.png"));

通过以上步骤，即可完整截取任意高度的HTML页面，生成一张完整的图片。 记得补充截图和文件删除的代码，以及必要的异常处理。 此方法高效且可靠，解决了传统方法在高页面截图时遇到的内容缺失问题。