Taking Screenshots of Websites with .NET Windows Forms

In order to take screenshots in .NET you might use a WebBrowser control and saves an image rendered.

If you are looking for code examples to take webpage screenshots in PHP, read the post Taking Screenshots of Websites with PHP.

Capturing screenshot from WebBrowser control in C#

To do so, you can add a standard WebBrowser component in Visual Studio and use WebBrowser.DrawToBitmap method.

Source code

Bitmap bmp = new Bitmap(1024, 728);
webBrowser.DrawToBitmap(bmp, new Rectangle(webBrowser.Location.X, webBrowser.Location.Y, webBrowser.Width, webBrowser.Height));
bmp.Save ("c:/path/to/myfile.jpg");

1. add a Web Browser control from Toolbox to your Windows Form. It will give a standard name for it, say webBrowser1.

2. Add an event handler for DocumentCompleted event:

Source code

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
..
}

3. Add a new button to your form and an event handler for click:

Source code

private void button1_Click(object sender, EventArgs e)
{
..
}

4. When user clicks the button it will open an URL in the webbrowser control and saves an image once it is fully loaded.

The final code will look like this:

Source code

private void button1_Click(object sender, EventArgs e)
{
webBrowser1.Navigate("http://yahoo.com");
}
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
// save the image to disk
Bitmap bmp = new Bitmap(1024, 728);
webBrowser1.DrawToBitmap(bmp, new Rectangle(webBrowser1.Location.X, webBrowser1.Location.Y, webBrowser1.Width, webBrowser1.Height));
bmp.Save ("c:/path/to/myfile.jpg");
}

How To Get A Website Thumbnail in a C# Application Without Creating A Form (console)

Source code

public Bitmap GenerateScreenshot(string url, int width, int height)
{
// Load the webpage into a WebBrowser control
WebBrowser wb = new WebBrowser();
wb.ScrollBarsEnabled = false;
wb.ScriptErrorsSuppressed = true;
wb.Navigate(url);
while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }
// Set the size of the WebBrowser control
wb.Width = width;
wb.Height = height;
if (width == -1)
{
// Take Screenshot of the web pages full width
wb.Width = wb.Document.Body.ScrollRectangle.Width;
}
if (height == -1)
{
// Take Screenshot of the web pages full height
wb.Height = wb.Document.Body.ScrollRectangle.Height;
}
// Get a Bitmap representation of the webpage as it's rendered in the WebBrowser control
Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));
wb.Dispose();
return bitmap;
}
[/codesyntax lang]
The following function returns a Bitmap object for the page so you use it to save to disk as follows:
[codesyntax lang="csharp"]
Bitmap bmp = GenerateScreenshot("http://yahoo.com", 1024, 768);
bmp.Save ("c:/path/to/myfile.jpg");

http://pietschsoft.com/post/2008/07/c-generate-webpage-thumbmail-screenshot-image.aspx

The same technique is used in this example:

http://www.codeproject.com/Articles/16422/How-To-Get-A-Website-Thumbnail-in-a-C-Application

Webkit, Gecko WebBrowser controls

WebBrowser component uses the standard IE browser engine installed on your computer.

If you are not satisfied with rendering of web pages by IE you can use WebKit (used by Safari) or Gecko (used by Firefox) browser components in Visual Studio.

To do so we need to use .NET Wrappers (embeddable components for a Windows Form):

– .NET Wrapper for WebKit  – https://github.com/webkitdotnet

– .NET Wrapper for XulRunner 3.6 – http://se7en-soft.com/moznet/getmoznet.aspx

– .NET Wrapper for Gecko – http://code.google.com/p/geckofx/

–  Chromium Embedded Framework – https://github.com/chillitom/CefSharp

–  Mono.WebBrowser control (supports Gecko and Webkit) – http://mono-project.com/WebBrowser

To decide which engine is the best for you, you might want to read the discussions on StackOverflow:

http://stackoverflow.com/questions/790542/replacing-net-webbrowser-control-with-a-better-browser-like-chrome

http://stackoverflow.com/questions/26147/is-it-possible-to-embed-gecko-or-webkit-in-a-windows-form-just-like-a-webview

http://stackoverflow.com/questions/142184/is-there-an-embeddable-webkit-component-for-windows-c-sharp-development

Example of using .NET wrapper for Gecko

Using .NET Wrappers for WebKit, Gecko or other engines is straightforward. In most cases you can use controls the same way you use a standard WebBrowser control.

Below are instructions how to use .NET wrapper for Gecko engine:

– Download an archive with binaries from http://code.google.com/p/geckofx/.

The latest version now can be downloaded via this link: http://code.google.com/p/geckofx/downloads/detail?name=Skybound.GeckoFX.bin.v1.9.1.0.zip.

– Unzip the archive. You must have files /bin/Skybound.Gecko.dll and /bin/Skybound.Gecko.xml

– Open your project in Visual Studio. Open your form in design mode. Open Toolbox panel.

– From top menu click on Tools/Choose Toolbox Items to open a dialog window.

Click browse and find Skybound.Gecko.dll on your disk.

Close the dialog window.

– Now you should see a new control in Toolbox – GeckoWebBrowser. Drug&Drop it on your form.

– Add a button which will open an URL in browser after clicking on it.

Also add an event handler for DocumentCompleted event for WebBrowser control.

– Add an event handler for DocumentCompleted event:

– When user clicks the button it will open an URL in the webbrowser control and saves an image once it is fully loaded.

Source code

private void button1_Click(object sender, EventArgs e)
{
geckoWebBrowser1.Navigate("http://yahoo.com");
}
private void geckoWebBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
// save the image to disk
Bitmap bmp = new Bitmap(1024, 728);
geckoWebBrowser1.DrawToBitmap(bmp, new Rectangle(geckoWebBrowser1.Location.X, geckoWebBrowser1.Location.Y, geckoWebBrowser1.Width, geckoWebBrowser1.Height));
bmp.Save ("c:/path/to/myfile.jpg");
}