给网页截图听起来只是一次调用的事。但实际做起来，往往会牵扯出一堆问题：浏览器尺寸、渲染延迟、动态内容、固定头部，还有内存占用。

我是在截取一个很长的 Reddit 页面时遇到这些问题的。最初的版本只是调用 `browser.bitmap()` 然后把结果保存下来。这确实能用，但只截到了页面的可见部分。后面的工作，都是在把这个简单的截图能力，改造成一个真正能应付长页面和动态页面的方案。

本文会从一个最简单的 Fuzio 截图开始，一步步走到分段式整页截图。我们用 Reddit 作为测试页面，因为它同时具备懒加载、吸顶元素和 Cookie 弹窗，比较接近真实场景。

## 最简单的截图

先从最小可用的版本开始。Fuzio 可以直接返回一个包含浏览器当前内容的 `Bitmap`：

在截图之前，请确保浏览器已经加载完页面，并且尺寸不为空。

```java
var bitmap = browser.bitmap();
var image = BitmapImage.toToolkit(bitmap);
ImageIO.write(image, "PNG", new File("screenshot.png"));
```

`BitmapImage.toToolkit()` 会把 Fuzio 的 bitmap 转换成标准的 `BufferedImage`，之后就可以用 `ImageIO` 保存。

结果大致如下：

![simple-screenshot.png](https://developer.qcloudimg.com/http-save/yehe-12305456/83ea5e11be23ac9bc1b6876f05a4ca61.png)

结果是正确的，但并不完整。截图里只有当前浏览器视口内可见的那一部分页面。

原因在于 `browser.bitmap()` 捕获的是浏览器在那一刻的尺寸。如果浏览器是 1024 × 768 逻辑像素，那么截取的区域就对应这个视口，而不是整个可滚动的文档。在高 DPI 显示器上，保存下来的 bitmap 可能包含更多物理像素，因为 Fuzio 还会考虑显示器的缩放系数。

## 调整浏览器尺寸截取整页

顺理成章的下一步，是在截图之前把浏览器尺寸调整为整个文档的大小。首先，我们可以向页面查询它的可滚动宽度和高度。对于大多数页面，`scrollWidth` 和 `scrollHeight` 就够用了：

```java
var widthScript = """
        Math.max(
            document.body.scrollWidth,
            document.documentElement.scrollWidth)
        """;

var heightScript = """
        Math.max(
            document.body.scrollHeight,
            document.documentElement.scrollHeight)
        """;
```

导航完成之后，拿到主框架，测量文档尺寸，调整浏览器大小，然后再截一次图：

```java
var frame = browser.mainFrame().orElseThrow();
Double pageWidth = frame.executeJavaScript(widthScript);
Double pageHeight = frame.executeJavaScript(heightScript);

browser.resize(pageWidth.intValue(), pageHeight.intValue());
var bitmap = browser.bitmap();
```

这样得到的截图高多了：

![微信图片_20260818141326_206_24.png](https://developer.qcloudimg.com/http-save/yehe-12305456/c6102d2664a3f3402ffdbcbd1430b497.png)

尺寸是对了，但内容还没准备好。浏览器确实完成了调整，可页面还需要时间去加载和渲染那些因为放大视口而变得可见的内容。

如果只是做个快速试验，加一个显式的等待就够了：

```java
browser.resize(pageWidth.intValue(), pageHeight.intValue());

// 一个靠反复试验得出的经验值。
Thread.sleep(2000);

var bitmap = browser.bitmap();
```

现在页面有时间完成渲染了：

![big-viewport-content.png](https://developer.qcloudimg.com/http-save/yehe-12305456/1d08dfb298fbf5a35b85f3f385b76e0d.png)

这个版本对中等长度的页面很实用，但有一个现实的限制。视口非常高时，Chromium 需要渲染一个非常高的视口，而生成的 bitmap 必须完整放进 Java 进程的内存里。页面越长，bitmap 就越大，所以在图片被保存之前，这种做法可能已经吃掉大量内存了。

## 分段截图

与其一次性渲染整个页面，不如把它切成若干片来截：

1. 固定一个视口高度。
2. 滚动到下一段。
3. 把每一段的 bitmap 存成单独的图片。
4. 最后再把这些图片拼起来。

由于 Reddit 会在滚动时不断加载更多内容，我们还需要一个停止条件。在这个示例里，我们简单地只截取固定数量的段：

```java
var shotCount = 15;
var viewportHeight = 1000;

browser.resize(pageWidth.intValue(), viewportHeight);

for (var count = 0; count < shotCount; count++) {
    var scrollY = count * viewportHeight;
    frame.executeJavaScript("window.scrollTo(0, %d)".formatted(scrollY));

    // 用一个随意设定的停顿等待动态内容加载。
    Thread.sleep(500);

    var bitmap = browser.bitmap();
    var image = BitmapImage.toToolkit(bitmap);
    var file = new File("screenshot-%03d.png".formatted(count));
    ImageIO.write(image, "PNG", file);
}
```

接下来把这些截图合并成一张图：

```java
private static void mergeVertically(Path sourceDir, Path target)
        throws IOException {
    try (var paths = Files.list(sourceDir)) {
        var files = paths
                .filter(path -> path.toString().endsWith(".png"))
                .sorted(Comparator.comparing(Path::getFileName))
                .toList();

        var images = new ArrayList<BufferedImage>();
        for (var file : files) {
            images.add(ImageIO.read(file.toFile()));
        }

        var width = images.stream()
                .mapToInt(BufferedImage::getWidth)
                .max()
                .orElse(0);
        var height = images.stream()
                .mapToInt(BufferedImage::getHeight)
                .sum();

        var merged = new BufferedImage(
                width, height, BufferedImage.TYPE_INT_RGB);
        var graphics = merged.createGraphics();
        try {
            var y = 0;
            for (var image : images) {
                graphics.drawImage(image, 0, y, null);
                y += image.getHeight();
            }
        } finally {
            graphics.dispose();
        }

        ImageIO.write(merged, "PNG", target.toFile());
    }
}
```

传入存放分段文件的目录来调用它：

```java
mergeVertically(Path.of("."), Path.of("merged.png"));
```

合并后的结果已经接近了，但还不够干净：

![segments-fixed-elements (1).png](https://developer.qcloudimg.com/http-save/yehe-12305456/2856216f36fa94b842cd83fef164ac63.png)

重复出现的头部和侧边栏是意料之中的。带有 `position: fixed` 或 `position: sticky` 的元素在页面滚动时会保持不动，所以它们会出现在每一段里。

## 处理固定元素

对整页截图来说，固定元素通常只应该出现在第一段中。在截取第二段之前，我们可以用一小段 JavaScript 把这些元素隐藏掉：

```java
var hideFixedElements = """
        (() => {
            document.querySelectorAll('*').forEach(element => {
                const position = getComputedStyle(element).position;
                if (position === 'fixed' || position === 'sticky') {
                    element.style.display = 'none';
                }
            });
        })()
        """;

for (var count = 0; count < shotCount; count++) {
    if (count == 1) {
        frame.executeJavaScript(hideFixedElements);
    }

    // 滚动、等待，然后截取下一段。
}
```

固定元素并不是唯一需要针对具体页面清理的东西。Cookie 弹窗是另一个常见问题，而且每个站点的实现方式都不一样。在 Reddit 上，可以通过查找 `reddit-cookie-banner` 元素把弹窗隐藏掉：

```java
var hideCookieBanner = """
        (() => {
            const dialog = document.querySelector('reddit-cookie-banner');
            if (dialog) {
                dialog.style.display = 'none';
            }
        })()
        """;

frame.executeJavaScript(hideCookieBanner);
```

处理完固定元素和 Cookie 弹窗之后，拼接出来的图片终于像一张正经的长截图了：

![complete-screenshot.png](https://developer.qcloudimg.com/http-save/yehe-12305456/9236b6cddeee6f11c6b67a53b1639754.png)

## 结语

如果你只需要可见视口的内容，直接调用 `browser.bitmap()` 就足够了。而要做整页截图，问题就更偏向工程实践而非机制本身：页面必须有一个合适的尺寸，动态内容需要时间渲染，很长的文档则可能需要分段捕获。

分段方案让内存占用更可控，也让你有能力去处理吸顶头部、Cookie 弹窗这类页面特有的问题。它并不通用，因为真实的网页千差万别，但它给出了用 Fuzio 捕获网页的核心模式。



给网页截图听起来只是一次调用的事。但实际做起来，往往会牵扯出一堆问题：浏览器尺寸、渲染延迟、动态内容、固定头部，还有内存占用。

Java 网页长截图实现：从只能截视口到分段拼接整页

Java 网页长截图完整实现：直接截图只能拿到视口内的可见区域，本文讲解如何测量文档真实高度、等待动态内容渲染、分段滚动截图并纵向拼接成整页，同时处理吸顶元素与 Cookie 弹窗，附完整代码示例。

编程语言

网页截图看似简单，实则需处理视口尺寸、动态渲染、固定元素和内存占用等问题。本文基于Fuzio工具，从基础截图到分段式整页捕获，以Reddit为测试页，详解调整浏览器尺寸、延迟等待、隐藏吸顶元素和Cookie弹窗的完整方案，助你实现高效长截图。

代码解释

Java

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Java 网页长截图实现：从只能截视口到分段拼接整页-腾讯云开发者社区-腾讯云

Java 网页长截图实现：从只能截视口到分段拼接整页

Java 网页长截图实现：从只能截视口到分段拼接整页

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐