DotNetBrowser

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

1. Create Browser instance that will work in the lightweight rendering mode..
2. Set the initial Browser size.
3. Load required web page by its URL or HTML and wait until its content is completely loaded.
4. 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();

            // #3 Set the required document size.
            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();
        }
    }
}

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;

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

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.