教程

Version:
8.2.1 7.41.6
List icon 目录
Close
DOM
SWT
HTML
集成
日志记录
Chromium 功能

截取整个网页截图

本教程将展示如何截取整个网页的截图，包括不可见的部分。

前提条件

要完成本教程，您需要：

  • Git。
  • Java 17 或更高版本。
  • 有效的 JxBrowser 许可证，评估版或商业版均可。有关许可证的更多信息，请参阅许可证指南。

获取代码

要查看本教程中创建的完整示例，请查看我们的示例集：

$ git clone https://github.com/TeamDev-IP/JxBrowser-Examples
$ cd JxBrowser-Examples/tutorials/html2png

添加许可证

要运行本教程，您需要设置许可证密钥。

截取整个网页的截图

要获取整个网页的图像，建议您执行以下操作：

  1. 加载网页并等待网页主框架完全加载。
  2. 获取整个页面的宽度和高度，包括不可见部分。
  3. 将 Browser 实例调整为计算出的尺寸。
  4. 获取当前加载的网页的位图。
browser.navigation().loadUrlAndWait("https://html5test.teamdev.com/");

// 等待网页完全渲染完成。
Thread.sleep(PAGE_RENDER_TIMEOUT_MS);

var frame = browser.mainFrame().orElseThrow();

// 获取整个网页的高度，
// 包括不可见的部分。
Double pageHeight = frame.executeJavaScript(
        "Math.max(document.body.scrollHeight, " +
                "document.documentElement.scrollHeight, document.body.offsetHeight, " +
                "document.documentElement.offsetHeight, document.body.clientHeight, " +
                "document.documentElement.clientHeight);");

// 获取已加载页面的宽度。
Double pageWidth = frame.executeJavaScript(
        "Math.max(document.body.scrollWidth, " +
                "document.documentElement.scrollWidth, document.body.offsetWidth, " +
                "document.documentElement.offsetWidth, document.body.clientWidth, " +
                "document.documentElement.clientWidth);");

// 将 "Browser" 调整为获取的尺寸。
browser.resize(pageWidth.intValue(), pageHeight.intValue());

// 获取当前加载网页的位图，
// 包括不可见部分。
var bitmap = browser.bitmap();

// 将位图转换为图像。
var image = BitmapImage.toToolkit(bitmap);

// 将图像保存为 PNG 文件。
ImageIO.write(image, "PNG", new File("html5test.teamdev.com.png"));

如果运行此程序，您应该会看到保存在项目工作目录中的浏览器网页截图：

HTML5Test Bitmap

其他注意事项

  • 如果网页太大（例如，1200x45000 像素），如果超出 GPU 内存，网页的部分内容将无法绘制。同时，JVM 可能会出现内存不足的情况。
  • 带有动画的网页截图可能会产生不可预测的结果。

总结

在本教程中，我们演示了如何在 JxBrowser 中截取网页截图。