Web Page Capturing

• Download source - 58.9 KB

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

• Yondem, Daron. "How to take a screenshot (thumbnail) of a web site with ASP.NET 2.0?" 23 December 2006. <http://daron.yondem.com/en/post/ebff529c-3bd8-446d-80fd-58463cfc44fd>.
• Dooskoobi. "Webpage thumbnailer". 18 August 2006. <http://www.codeproject.com/Articles/15211/Webpage-thumbnailer>.