JxBrowser library allows you to take a screenshot of any web page including hidden scrollable area and save it as an image file. This functionality can be used:

  • In a web service that provides image of a web page by its URL
  • For automated tests when you need to compare screenshots of the same web page to find regression and changes.

We recommend that you take a look at Quick Start Guides where you can find detailed instruction about how to download and configure JxBrowser, include it into your Java project using your favorite IDE and run your first program.


To take a screenshot of a specified web page you need to follow the steps below:

  1. Create Browser instance.
  2. Set the required Browser view size.
  3. Load required web page by its URL or HTML and wait until it is loaded completely.
  4. Get java.awt.Image of the loaded web page.


Important: Chromium engine has limitation as for the maximum web page size that can be captured. The maximum page height is 16384 pixels.


The example below demonstrates how to perform all these steps: 

Swing:

/*
 * Copyright (c) 2000-2017 TeamDev Ltd. All rights reserved.
 * TeamDev PROPRIETARY and CONFIDENTIAL.
 * Use is subject to license terms.
 */

import com.teamdev.jxbrowser.chromium.Browser;
import com.teamdev.jxbrowser.chromium.BrowserType;
import com.teamdev.jxbrowser.chromium.Callback;
import com.teamdev.jxbrowser.chromium.swing.BrowserView;
import com.teamdev.jxbrowser.chromium.swing.internal.LightWeightWidget;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.RenderedImage;
import java.io.File;

/**
 * The sample demonstrates how to get screen shot of the web page
 * and save it as PNG image file.
 */
public class HTMLToImageSample {
    public static void main(String[] args) throws Exception {
        // #1 Create Browser instance
        Browser browser = new Browser(BrowserType.LIGHTWEIGHT);
        BrowserView view = new BrowserView(browser);

        // #2 Set the required view size
        browser.setSize(1280, 1024);

        // Wait until Chromium resizes view
        Thread.sleep(500);

        // #3 Load web page and wait until web page is loaded completely
        Browser.invokeAndWaitFinishLoadingMainFrame(browser, new Callback<Browser>() {
            @Override
            public void invoke(Browser browser) {
                browser.loadURL("https://teamdev.com");
            }
        });

        // Wait until Chromium renders web page content
        Thread.sleep(500);

        // #4 Get java.awt.Image of the loaded web page.
        LightWeightWidget lightWeightWidget = (LightWeightWidget) view.getComponent(0);
        Image image = lightWeightWidget.getImage();
        ImageIO.write((RenderedImage) image, "PNG", new File("teamdev.com.png"));

        // Dispose Browser instance
        browser.dispose();
    }
} 

 
JavaFX: 

/*
 * Copyright (c) 2000-2017 TeamDev Ltd. All rights reserved.
 * TeamDev PROPRIETARY and CONFIDENTIAL.
 * Use is subject to license terms.
 */

import com.teamdev.jxbrowser.chromium.Browser;
import com.teamdev.jxbrowser.chromium.BrowserType;
import com.teamdev.jxbrowser.chromium.Callback;
import com.teamdev.jxbrowser.chromium.javafx.BrowserView;
import com.teamdev.jxbrowser.chromium.javafx.internal.LightWeightWidget;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.embed.swing.SwingFXUtils;
import javafx.scene.image.Image;
import javafx.stage.Stage;

import javax.imageio.ImageIO;
import java.io.File;

/**
 * The sample demonstrates how to get screen shot of the web page
 * and save it as PNG image file.
 */
public class JavaFXHTMLToImageSample extends Application {
    @Override
    public void start(final Stage primaryStage) throws Exception {
        // #1 Create Browser instance
        final Browser browser = new Browser(BrowserType.LIGHTWEIGHT);
        final BrowserView view = new BrowserView(browser);

        // #2 Set the required view size
        browser.setSize(1280, 1024);

        // Wait until Chromium resizes view
        Thread.sleep(500);

        // #3 Load web page and wait until web page is loaded completely
        Browser.invokeAndWaitFinishLoadingMainFrame(browser, new Callback<Browser>() {
            @Override
            public void invoke(Browser browser) {
                browser.loadURL("https://teamdev.com");
            }
        });

        Platform.runLater(new Runnable() {
            @Override
            public void run() {
                try {
                    // Wait until Chromium renders web page content
                    Thread.sleep(500);

                    // #4 Get javafx.scene.image.Image of the loaded web page
                    LightWeightWidget lightWeightWidget = (LightWeightWidget) view.getChildren().get(0);
                    Image image = lightWeightWidget.getImage();

                    // Save the image into a PNG file
                    ImageIO.write(SwingFXUtils.fromFXImage(image, null), "PNG", new File("google.com.png"));
                } catch (Exception ignored) {}
                finally {
                    // Dispose Browser instance
                    browser.dispose();
                }
            }
        });
    }

    public static void main(String[] args) {
        launch(args);
    }
}

  

If you need to take screenshot of the whole web page including scrollable hidden parts and you don’t know dimension of the web page, then you need to calculate it using the following approach:

JSValue documentHeight = browser.executeJavaScriptAndReturnValue("Math.max(document.body.scrollHeight, " +
        "document.documentElement.scrollHeight, document.body.offsetHeight, " +
        "document.documentElement.offsetHeight, document.body.clientHeight, " +
        "document.documentElement.clientHeight);");
JSValue documentWidth = browser.executeJavaScriptAndReturnValue("Math.max(document.body.scrollWidth, " +
        "document.documentElement.scrollWidth, document.body.offsetWidth, " +
        "document.documentElement.offsetWidth, document.body.clientWidth, " +
        "document.documentElement.clientWidth);");

final int scrollBarSize = 25;
int viewWidth = (int) documentWidth.getNumber() + scrollBarSize;
int viewHeight = (int) documentHeight.getNumber() + scrollBarSize;

In this code we use JavaScript and DOM API to get dimension of the loaded document.