Taking a screenshot of an entire web page

This tutorial shows how to take a screenshot of an entire web page, including the invisible part.

Prerequisites

To go through this tutorial, you will need:

Git.
Java 17 or higher.
A valid JxBrowser license. It can be either Evaluation or Commercial. For more information on licensing, please see the licensing guide.

Getting the code

To see a complete example created in this tutorial, please check out our collection of examples:

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

Adding the license

To run this tutorial, you need to set up a license key.

Taking a screenshot of the entire web page

In order to get an image of an entire web page we recommend that you perform the following actions:

Load a web page and wait until the main frame of the web page is loaded completely.
Obtain the width and height of the entire page, including the invisible part.
Resize the Browser instance to the calculated dimensions.
Take the bitmap of the currently loaded web page.

browser.navigation().loadUrlAndWait("https://html5test.teamdev.com/");

// Wait until the web page has been rendered completely.
Thread.sleep(PAGE_RENDER_TIMEOUT_MS);

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

// Get the height of the whole web page,
// including the invisible part.
Double pageHeight = frame.executeJavaScript(
        "Math.max(document.body.scrollHeight, " +
                "document.documentElement.scrollHeight, document.body.offsetHeight, " +
                "document.documentElement.offsetHeight, document.body.clientHeight, " +
                "document.documentElement.clientHeight);");

// Get the width of the loaded page.
Double pageWidth = frame.executeJavaScript(
        "Math.max(document.body.scrollWidth, " +
                "document.documentElement.scrollWidth, document.body.offsetWidth, " +
                "document.documentElement.offsetWidth, document.body.clientWidth, " +
                "document.documentElement.clientWidth);");

// Resize the browser to the obtained dimensions.
browser.resize(pageWidth.intValue(), pageHeight.intValue());

// Obtain the bitmap of the currently loaded web page,
// including the invisible part.
var bitmap = browser.bitmap();

// Convert the bitmap to image.
var image = BitmapImage.toToolkit(bitmap);

// Save the image to a PNG file.
ImageIO.write(image, "PNG", new File("html5test.teamdev.com.png"));

If you run this program, you should see the screenshot of the browser web page saved in the project’s working directory:

HTML5Test Bitmap

Additional considerations

If the web page is too big (e.g., 1200x45000 pixels), the part of the web page won’t be painted if the GPU memory will be exceeded. Also, there is a chance of JVM running out of memory.
Screenshots of webpages with animations may produce unpredictable results.

Summary

In this tutorial, we have demonstrated how you can take a screenshot of a web page in JxBrowser.

DOM

SWT

HTML

Integration

Logging

Chromium features