javascript - Java+Selenium如何实现将HTML页面转换成图片?
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个答案
看你思路是想多次截图拼接为一个完整图片。你可以每次滑动少一点，比如第二次截取的图片中有四分之一和上一张图片重合，存在重合部分就可以用算法把多张图片拼接成一张长图了。
-
本文向大家介绍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 ,对于上面
-
我想修改html文件转换为PDF。 目前我使用“ITExtrenderer”将html文件转换为pdf。 当前： 1-但以后我需要修改html文件，然后再生成pdf，为此我想提取html文件内容并转换成字符串，然后我替换字符串上的一些文本html： 2-然后从html中替换字符串中的标记 主： 但现在我不知道如何用html文件的旧html字符串替换新字符串
-
我正在获取一个json对象,该对象如下所示： 然后，我使用模板文字追加页面上的对象，如下所示 我遇到的问题是，我需要${item.entry}来观察JSON中的html和段落中断。我该怎么做？