Click here to Skip to main content
Click here to Skip to main content

Web Page Capturing

, 29 Dec 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Windows Forms application for capturing or thumbnailing a web page

Introduction

This is a Windows Forms application for taking a snapshot of a web page. It has many uses (example: Alexa and Google search).

Background

I used WebBrowser in code behind to load the page and then took a snapshot of it. The output image will be shown in a picture box in the main window.

Using the Code

There is just one class WebPageCapture that handles everything. After filing the forms and clicking on save button, checking that the size property has been set properly, the output image format has been chosen and the path where to save the image will happen first and then the webBrowser will navigate to the specified URL.

There are two different sizing mechanisms. The first one is to take a snapshot of the whole page, which is the default option, and that can be done by ticking the Full page check box. The second one is to set the size manually which can be done by unchecking the Full page check box option and typing the required size.

The most important part is using the DrawToBitmap method which takes a Bitmap object and Rectangle object. However, most people ask why the output is an empty white image. The reason is that the page hasn't been loaded completely. So, I used DocumentCompleted property.

// wait till the loading finishes
webB.DocumentCompleted += 
	new WebBrowserDocumentCompletedEventHandler(WebBrowser_DocumentCompleted); 
while (webB.ReadyState != WebBrowserReadyState.Complete)
{
    Application.DoEvents();
    if (webB.IsDisposed)
        break;
} 

The WebBrowser_DocumentCompleted method will take the preferred size and set it to the size of the browser. Then, it will create the Bitmap object and the Rectangle object to pass it to the most important method DrawToBitmap.

// creating the Bitmap
Bitmap bitmap = new Bitmap(weidth, height);
Rectangle bitmapRect = new Rectangle(0, 0, bitmap.Width, bitmap.Height);
// the most important method which will save an image 
// of the web page with the a specific size
webB.DrawToBitmap(bitmap, bitmapRect); 
System.Drawing.Image origImage = bitmap; 

After that, a thumbnail of the output image will be created to be shown in the pictureBox in the main window.

//creating a thumbnail to show it in a picture box 
//in the main user interface and setting some property
System.Drawing.Image origThumbnail = new Bitmap(400, 400, origImage.PixelFormat);
Graphics GraphicT = Graphics.FromImage(origThumbnail);
GraphicT.CompositingQuality = CompositingQuality.HighQuality;
GraphicT.SmoothingMode = SmoothingMode.HighQuality;
GraphicT.InterpolationMode = InterpolationMode.HighQualityBicubic;
Rectangle RectangleT = new Rectangle(0, 0, 400, 400);
GraphicT.DrawImage(origImage, RectangleT); 
// setting the image to be shown in the picture box in the main user interface
pictureBox1.Image = null;
pictureBox1.SizeMode = PictureBoxSizeMode.CenterImage;
pictureBox1.BackgroundImage = origThumbnail; 

The last part is to save the output image to the specified path taken from saveFileDialog.

Point of Interest

I have faced some problems of getting image of some pages like Google. I tried to increase the size and decrease it, but with no result. Finally, I read that the reason for this is because of using JavaScript and some script that can't be viewed by WebBrowser control.

References

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Abdullah Altokhais
Student
Saudi Arabia Saudi Arabia
No Biography provided
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinmemberCarsten V2.01-Jan-13 0:23 
GeneralRe: My vote of 5 PinmemberAbdullah Altokhais1-Jan-13 0:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 30 Dec 2012
Article Copyright 2012 by Abdullah Altokhais
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid