C#: Generate WebPage Thumbmail Screenshot Image

23. July 2008

There are a few services out there that serve up screenshots of any webpage for you to display on your website. One popular one is Kwiboo; this is the one that DotNetKicks uses. For some time now I've wondered what the easiest way to do this in .NET was, and today I stumbled upon the undocumented WebBrowser.DrawToBitmap method that makes this extremely easy to do.

By the way, I stumbled upon the WebBrowser.DrawToBitmap while taking a look at the source code for the WebPreview tool over at SmallSharpTools.com.

Here's a sample method that returns a Bitmap representation of a webpage:

public Bitmap GenerateScreenshot(string url)
{
    // This method gets a screenshot of the webpage
    // rendered at its full size (height and width)
    return GenerateScreenshot(url, -1, -1);
}

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

Here are some example usages of the above method:

// Generate thumbnail of a webpage at 1024x768 resolution
Bitmap thumbnail = GenerateScreenshot("http://pietschsoft.com", 1024, 768);

// Generate thumbnail of a webpage at the webpage's full size (height and width)
thumbnail = GenerateScreenshot("http://pietschsoft.com");

// Display Thumbnail in PictureBox control
pictureBox1.Image = thumbnail;

/*
// Save Thumbnail to a File
thumbnail.Save("thumbnail.png", System.Drawing.Imaging.ImageFormat.Png);
*/

asp.net, C# ,

Comments

7/26/2008 3:26:43 PM #
Can your code run on asp.net site? or only on Winform app ?
tobsen
tobsen
7/26/2008 5:53:43 PM #
hmm.. this does not run in a console app.
7/26/2008 7:48:07 PM #
Yes this can be done in an ASP.NET website. In fact Brennan's code over at SmallSharpTools.com has a sample web project that implements it.
I recommend you go download the code over at SmallSharpTools.com:
http://smallsharptools.com/Projects/WebPreview/

Also, I don't see why this wouldn't work in a Console App, but I haven't tried it myself yet.
7/26/2008 7:56:52 PM #
@Chris,
Thanks for your reply. As I accepted, the web solution you pointed at (SmallSharpTools) suffer from the same problem
I had when I did the same few month ago. Lots of sites just appear as white square.
try http://yahoo.com.
7/26/2008 7:58:01 PM #
Sorry, I wanted to say: As I suspected...
7/27/2008 6:58:43 AM #
@tobsen

add  System.Drawing and System.Windows.Forms reference to your project
you need to add those DLL also.
8/30/2008 7:12:11 AM #
Nice post good luck, I am amaze to your post.
Patric
Patric
9/11/2008 11:31:49 AM #
Hi,

Is there any way to capture the browser window so you can get the rendering view from say, IE, Firefox and Opera?
Like http://browsershots.org/ does it.

And it be really nice if it's able to run as a Windows service or in ASP.NET

/Patric
9/12/2008 10:50:00 AM #
Pingback from code-inside.de

HowTo: Dynamisch Webseiten-Screenshots erzeugen | Code-Inside Blog
9/14/2008 6:17:16 AM #
The code in this post doesn't open a browser window, so that'd be why it doesn't provide the browser window or "chrome" graphics around the edge of the screenshots. To take a screenshot of the entire browser window (including its chrome) you'd have to open an instance of the browser and then take a screenshot of that windows using the Windows API's. I don't have a code snippet for this, but if anyone else does, please feel free to post it.
9/15/2008 1:56:10 AM #
When i give it this URL http://www.yahoo.com its not working, not giving a screen shot, also http://www.googl.com, can you help me with the reason and how to solve
Somdutta Roy
Somdutta Roy
9/15/2008 11:11:32 PM #
Wow, this article is a great one, i was always a native code programmer and recently am trying out the managed coding things and i must say managed coing makes quite a few seemingly difficult things in unmanaged codes really simpler
Gillian Riddoch
Gillian Riddoch
10/16/2008 8:16:05 PM #
Fantastic!!!
I have struggled all day with HttpWebRequests that kept throwing Parameter not valid errors when I tried to load the Image from a Datastream.  This worked first time, no problems!!!  MANY THANKS!!!
12/10/2008 1:04:36 AM #
Pingback from eamonn.org

Eamonn O’Brien-Strain   ::  links for 2008-12-08
1/6/2009 4:25:08 PM #
Excellent script, Thanks for share.
2/23/2009 9:46:53 PM #
Pingback from codemonkeylabs.com

Weekly Web Nuggets #23 : Code Monkey Labs
5/6/2010 3:34:04 PM #
Pingback from cetrasoft.com

Taking a screen shot of a web page in C# .NET | Cetrasoft
5/20/2010 6:30:04 PM #
Pingback from 244.mfbattle.com

Subaru Legacy Outback Performance Parts, Catalytic Converter Replacement Subaru Outback