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:
C#
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:
C#
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.