当前位置: 首页 > 知识库问答 >
问题:

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

马承
2024-09-29

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

  1. 对于页面总高度比较小的页面,可以直接给Dimension设置一个比较大的高度,一次性截取;但是对于页面总高度比较大的页面,即使给Dimension设置一个非常大的高度,也无法截取完整的页面.
  2. 因为上述原因,我使用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>

image.png
image.png

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的工具叫:PHPWord。 生成Word的原理是,将堆规定好了的xml压缩成一个zip包,并且把后缀名改成d

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

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

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

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

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

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

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