问题：

javascript - Java+Selenium如何实现将HTML页面转换成图片?

马承

2024-09-29

Java+Selenium如何实现将HTML页面转换成图片?

对于页面总高度比较小的页面,可以直接给Dimension设置一个比较大的高度,一次性截取;但是对于页面总高度比较大的页面,即使给Dimension设置一个非常大的高度,也无法截取完整的页面.
因为上述原因,我使用window.scrollBy(0,X)来滑动页面,想每次截高度X的内容,然后向下移动X,然后重新截图.但从结果来看,并不符合预期.截取的图片存在部分内容缺失.

我创建了一个最简单的页面,从下图可以看出,234~240丢失了,我想可能是scrollBy的原因,但是我不知道该怎么解决这个问题.

<!DOCTYPE html>
<html lang="en">

<body>
  1<br>
  2<br>
  3<br>
  4<br>
  5<br>
  .....
  800<br>
</body>
</html>

public class HtmlToImage_Selenium {

  public static void main(String[] args) {

    // 路径
    String chromePath = "D:\\htmlToImg\\Selenium\\chromedriver-win64\\chromedriver.exe";
    String mergePath = "D:\\htmlToImg\\Selenium\\output\\merge.png";
    String tempPath = "D:\\htmlToImg\\Selenium\\output\\screenshot_";

    // 设置 ChromeDriver 路径
    System.setProperty("webdriver.chrome.driver", chromePath);

    // 设置 Chrome 选项
    ChromeOptions options = new ChromeOptions();
    // 无头模式
    options.addArguments("--headless");
    // 窗口大小
    options.addArguments("--window-size=2160,1440");

    // 创建 ChromeDriver
    WebDriver driver = new ChromeDriver(options);

    try {
      // 加载 HTML 文件
      driver.get("file:///D:/htmlToImg/Test.html");

      // 使用显式等待，确保页面加载完成
      WebDriverWait wait = new WebDriverWait(driver, 15);
      wait.until(ExpectedConditions.visibilityOfElementLocated(By.tagName("body")));

      // 获取页面总高度
      JavascriptExecutor js = (JavascriptExecutor) driver;
      long pageHeight = (long) js.executeScript("return document.body.scrollHeight;");
      System.out.println("页面高度为" + pageHeight);

      // 每次截取的高度
      int captureHeight = 5000;
      int numberOfScreenshots = (int) Math.ceil((double) pageHeight / captureHeight);

      // 截取的图片的总高度
      int totalHeight = 0;
      List<File> files = new ArrayList<>();

      for (int i = 0; i < numberOfScreenshots; i++) {
        // 设置窗口大小
        Dimension dimension = new Dimension(2160, captureHeight);
        driver.manage().window().setSize(dimension);
        // 截取屏幕并保存为临时图片
        File screenshot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
        files.add(screenshot);
        BufferedImage img = ImageIO.read(screenshot);
        // 计算合并后的图片的总高度
        totalHeight += img.getHeight();
        System.out.println("第" + (i + 1) + "张图完成");
        FileHandler.copy(screenshot, new File(tempPath + (i + 1) + ".png"));
        // 使用JS滚动页面
        js.executeScript("window.scrollBy(0, " + captureHeight + ");");
        // 等待
        Thread.sleep(500);
      }

      System.out.println(totalHeight);

      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(mergePath));
      System.out.println("合并成功");

    } catch (IOException | InterruptedException e) {
      e.printStackTrace();
    } finally {
      // 关闭 WebDriver
      driver.quit();
    }
  }
}

版本限定:JDK8+selenium-java(3.141.59)
我希望能通过JDK8+selenium生成给定的HTML静态页面的截图

共有1个答案

段弘和

2024-09-29

看你思路是想多次截图拼接为一个完整图片。你可以每次滑动少一点，比如第二次截取的图片中有四分之一和上一张图片重合，存在重合部分就可以用算法把多张图片拼接成一张长图了。

类似资料：

php实现将HTML页面转换成word并且保存的方法

本文向大家介绍php实现将HTML页面转换成word并且保存的方法，包括了php实现将HTML页面转换成word并且保存的方法的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了php实现将HTML页面转换成word并且保存的方法。分享给大家供大家参考，具体如下：这里用使用到一个PHP的工具叫：PHPWord。生成Word的原理是，将堆规定好了的xml压缩成一个zip包，并且把后缀名改成d
JavaScript实现将xml转换成html table表格的方法

本文向大家介绍JavaScript实现将xml转换成html table表格的方法，包括了JavaScript实现将xml转换成html table表格的方法的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了JavaScript实现将xml转换成html table表格的方法。分享给大家供大家参考。具体如下：下面是一个简单的示例用法：希望本文所述对大家的javascript程序设计有所帮
如何使用wkhtml2pdf将html页面转换为pdf

本文向大家介绍如何使用wkhtml2pdf将html页面转换为pdf，包括了如何使用wkhtml2pdf将html页面转换为pdf的使用技巧和注意事项，需要的朋友参考一下本文将指导您安装可以将HTML页面或HTML输出转换为PDF格式的工具。如果我们需要将Pdf发送给一组客户或客户，以及发送报告而不是HTML（您可以通过PDF格式通过电子邮件发送）的报告，则此功能还将有助于生成Pdf的代码。为您
C#实现将PPT转换成HTML的方法

本文向大家介绍C#实现将PPT转换成HTML的方法，包括了C#实现将PPT转换成HTML的方法的使用技巧和注意事项，需要的朋友参考一下本文是一个C#的小程序，主要实现将ppt转换成html的功能,方法很多，此处与大家分享一下，希望能对大家的项目开发起到一定的借鉴作用。主要功能代码如下：以上程序是使用C# 先创建一个ppt 文件并向里面写入了文字，然后再把此ppt 转换成html ,对于上面
如何用JavaScript将json值转换为html？

我正在获取一个json对象,该对象如下所示：然后，我使用模板文字追加页面上的对象，如下所示我遇到的问题是，我需要${item.entry}来观察JSON中的html和段落中断。我该怎么做？
如何替换文本html转换成pdf？Java

我想修改html文件转换为PDF。目前我使用“ITExtrenderer”将html文件转换为pdf。当前： 1-但以后我需要修改html文件，然后再生成pdf，为此我想提取html文件内容并转换成字符串，然后我替换字符串上的一些文本html： 2-然后从html中替换字符串中的标记主：但现在我不知道如何用html文件的旧html字符串替换新字符串
jsp实现将动态网页转换成静态页面的方法

本文向大家介绍jsp实现将动态网页转换成静态页面的方法，包括了jsp实现将动态网页转换成静态页面的方法的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了jsp实现将动态网页转换成静态页面的方法。分享给大家供大家参考。具体如下：如果我可以将jsp动态网页转换成静态页面，那么访问的时候就不需要频繁的访问数据库了。 jsp 显示内容缓存技巧前段时间做自己社区的论坛，在jive 的基础上做一个页
html页面中如何实现gif图片重新播放？

本文向大家介绍html页面中如何实现gif图片重新播放？相关面试题，主要包含被问及html页面中如何实现gif图片重新播放？时的应答技巧和注意事项，需要的朋友参考一下因为浏览器会缓存图片，所以对于一次性gif如果不做处理的话，只会播放一次。如果需要重新播放gif，重新设置下img标签的src属性即可

javascript - Java+Selenium如何实现将HTML页面转换成图片?

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档