Saving Web Page to PNG Image in Offscreen Mode : DotNetBrowser

Note: Advice in this article will only work for DotNetBrowser 1.
See the corresponding example for DotNetBrowser 2 here.

To take a screenshot of a specified web page you need to perform the following steps:

Create Browser instance that will work in the lightweight rendering mode..
Set the initial Browser size.
Load required web page by its URL or HTML and wait until its content is completely loaded.
Get System Drawing.Image of the loaded web page using Browser.ImageProvider.GetImage(width, height) .

Note: the Browser.ImageProvider.GetImage(width, height) method used in the following sample is supported for the lightweight rendering mode only. This feature is available from DotNetBrowser 1.11.

Example

This example is a console application that demonstrates how to capture an image of the complete web page. In this case, you even don't need to embed or show a BrowserView.

С#

using DotNetBrowser;
using DotNetBrowser.Events;
using System.Diagnostics;
using System.Drawing;
using System.Threading;

namespace HTMLToImageSample.OffScreen
{
    class Program
    {
        static void Main(string[] args)
        {
            int viewWidth = 1024;
            int viewHeight = 20000;
            string[] switches = {
                    "--disable-gpu",
                    "--max-texture-size=" + viewHeight
            };
            BrowserPreferences.SetChromiumSwitches(switches);
            Browser browser = BrowserFactory.Create(BrowserType.LIGHTWEIGHT);

            browser.SetSize(viewWidth, viewWidth);
            ManualResetEvent waitEvent = new ManualResetEvent(false);
            browser.FinishLoadingFrameEvent += delegate (object sender, FinishLoadingEventArgs e)
            {
                // Wait until main document of the web page is loaded completely.
                if (e.IsMainFrame)
                {
                    waitEvent.Set();
                }
            };
            browser.LoadURL("teamdev.com/dotnetbrowser");
            waitEvent.WaitOne();

            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);");

            int scrollBarSize = 25;

            viewWidth = (int)documentWidth.GetNumber() + scrollBarSize;
            viewHeight = (int)documentHeight.GetNumber() + scrollBarSize;

            Debug.WriteLine("GetImage: {0} x {1}", viewWidth, viewHeight);

            Image img = browser.ImageProvider.GetImage(viewWidth, viewHeight);
            img.Save(@"teamdev.png", System.Drawing.Imaging.ImageFormat.Png);

            browser.Dispose();
        }
    }
}

VB.NET

Imports System.Drawing
Imports System.Drawing.Imaging
Imports System.Threading
Imports DotNetBrowser
Imports DotNetBrowser.Events

Module Module1
    Sub Main()
        Dim viewWidth As Integer = 1024
        Dim viewHeight As Integer = 20000
        Dim switches As String() = {
                                       "--disable-gpu",
                                       "--max-texture-size=" & viewHeight}
        BrowserPreferences.SetChromiumSwitches(switches)

        Dim browser As Browser = BrowserFactory.Create(BrowserType.LIGHTWEIGHT)
        browser.SetSize(viewWidth, viewWidth)

        Dim waitEvent As ManualResetEvent = New ManualResetEvent(False)
        AddHandler browser.FinishLoadingFrameEvent, Sub(o As Object, e As FinishLoadingEventArgs)
                                                        If e.IsMainFrame Then
                                                            waitEvent.Set()
                                                        End If
                                                    End Sub

        browser.LoadURL("teamdev.com/dotnetbrowser")
        waitEvent.WaitOne()

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

        Dim scrollBarSize As Integer = 25
        viewWidth = CInt(documentWidth.GetNumber()) + scrollBarSize
        viewHeight = CInt(documentHeight.GetNumber()) + scrollBarSize


        Debug.WriteLine("GetImage: {0} x {1}", viewWidth, viewHeight)

        Dim img As Image = browser.ImageProvider.GetImage(viewWidth, viewHeight)
        img.Save($"teamdev.png", ImageFormat.Png)

        browser.Dispose()
    End Sub
End Module

Calculating Page Size

If you need to take the screenshot of the whole web page including scrollable hidden parts and you don’t know the web page dimensions, 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);");

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

VB.NET

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

Dim scrollBarSize As Integer = 25
Dim viewWidth As Integer = CInt(documentWidth.GetNumber()) + scrollBarSize
Dim viewHeight As Integer = CInt(documentHeight.GetNumber()) + scrollBarSize

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

The complete sample solution can be found in the attachments to this article. The project in this solution has NuGet dependencies, which will be resolved automatically during build.

Capturing Long Pages

If you have tried to capture a long web page, you may have noticed that the image is cut for the very long pages. This behavior is caused by the restriction inside the Chromium itself.

Chromium renders web page’s content on the canvas with the maximum height set to 16384. If the web page’s height exceeds the maximum texture size, the part of the web page outside the Chromium canvas will not be drawn and will be filled with black color.

To workaround this restriction and capture the complete image of the web page with the height that exceeds the maximum texture size, you should specify the following switches before creating any Browser instances:

int viewWidth = 1024;
int viewHeight = 20000;
string[] switches = {
        "--disable-gpu",
        "--max-texture-size=" + viewHeight
};
BrowserPreferences.SetChromiumSwitches(switches);

VB.NET

Dim viewWidth As Integer = 1024
Dim viewHeight As Integer = 20000
Dim switches As String() = {
                "--disable-gpu", 
                "--max-texture-size=" & viewHeight}
BrowserPreferences.SetChromiumSwitches(switches)

If these switches are specified, the GPU process will be disabled and the Chromium maximum texture size will be changed from 16384 to viewHeight.

Note: The --max-texture-size switch was introduced in DotNetBrowser 1.9.

DotNetBrowser

Welcome to DotNetBrowser Help Center