Screenshot of Webpage with ASP.NET

Winforms Grid TreeList Control .NET 2.0/3.5

Screenshot of Webpage with ASP.NET
Section: ASP.NET	Rating: Not rated yet!

CodeGod submitted this resource
The member's homepage is http://www.codegod.de
Visit the profile here

Attachment

Introduction

This article describes how you can take a screenshot of a special webpage programmatically with ASP.NET. In the example we take a screenshot of www.codegod.de and display it in an Image-control.

The concept

The goal of this sample is to find a way to capture a webpage's image. The parameter is just a special url. Only by knowing this url we want to be able to take a screenhot of this webpage - a bitmap of what the user would see if he/she types this url in the browser.
How can this be done? First of all we have to clarify were to take the picture of the webpage, on the client or on the server. To take a picture, we have to browse to the url and shot the result as image. To shot the image, we have to run .NET-code, so we have take the picture on the serverside. Then the picture has to be saved as bitmap. After that, we can display it like every image on the server with an asp:Image-control.

How to shot a photo of browser-content?

To achieve this, there are various ways we could go. We could use the WebBrowser-control of the .NET-framework 2.0, browse to the url with it and display the image in that. Then we could grab the contentpane and convert it to an image. Sounds simple? No, not really.
Another way is more easy: Use an existing program that can do this for us, why to invent the wheel again. There is a tool called IECapt.exe which is available here. This tool can be used to take pictures of webpages. Okay, this part is done already, the rest has to be done by ourselves. So what's the rest?
We have to put IECapt.exe on the server and define that we have the right to execute it. In our code we have to start the program and wait for it's exit. After that we assume that IECapt has produced our image. Then we scale the image to the desired dimensions and save it with a special filename. Now we can assign the image's url to the property ImageUrl of an asp:Image-control. Okay, let's do it!

Building the sample

1. Create the ASP.NET WebSite
In VS 2005 we create a new Website by choosing File->New->Web Site. Then we select ASP.Net Web Site and define the name WebPageCapture for it.
The controls we need is mainly the asp:Image-control to display the image we produced, in addition we need a TextBox to define the url of the webpage we want to capture and 2 other Textboxes to select the dimension of the screenshot. The page now looks like this:

Figure 1

2. The capture logic
As we said, we need to start the program IECapt.exe to shot an image of our webpage. The first thing we need to do is to download IECapt and put it into the folder of our webproject. Don't forget to allow the exe to be executed in IIS and make the folder writeable cause we want to store our images in it.
To start the application IECapt.exe we use the .NET-class Process. It has a method WaitForExit that we can use to wait for the application's end. Then we know that the image is generated. We define a simple class for that called ScreenshotHelper with a methode Shot:

private const int    TIMEOUT = 30000;
private const string TMP_NAME = "TMP_SHOT.png";

private void Shot(string url, string rootDir )
{
    try {
    
        string arguments = url + " " + rootDir + "\\" + TMP_NAME;

        Process p = Process.Start(rootDir + "\\" + EXTRACTIMAGE_EXE, arguments );
        p.WaitForExit(TIMEOUT);
        if (!p.HasExited) {
            p.Kill();
            throw new Exception ("Timed out while creating the thumbnail.");
        }
    }
    catch( Exception ex )
    {
        Trace.WriteLine( ex.ToString() );
        throw ex;
    }
}

The image of the url can be captured by this method and an image with a temporary name is generated (TMP_NAME). Now we want to use our parameters for the dimension and scale the image by them (Okay, it is more to crop than to scale). We need another method in our class to transform the image with the desired dimensions:

public string GetImage(string url, string name, string rootDir, 
    int width, int height )
{

    try
    {
        string fileName = rootDir + "\\" + TMP_NAME;

        Shot( url, rootDir );

        
        System.Drawing.Image thumbImage = 
            System.Drawing.Image.FromFile(fileName);

        Scale( thumbImage, width, height );

        System.Drawing.Image scaledImg = Scale( thumbImage, width, height );

        fileName = rootDir + "\\" + name + ".png";
        if( File.Exists( fileName ) )
            File.Delete( fileName );

        scaledImg.Save( fileName ,ImageFormat.Png);

        return name + ".png";

    }
    catch (Exception ex)
    {
        Trace.WriteLine( ex.ToString() );
        return null;
    }
}

3. Shot the image
On pressing the button Shot the image we call the method GetImage of the ScreenshotHelper-class and assign the result as ImageUrl to the Image-control:

protected void btnShot_Click(object sender, EventArgs e)
{
    ScreenshotHelper ssh = new ScreenshotHelper();
    string imagePath = ssh.GetImage( txtUrl.Text, "MyImage",
                  Server.MapPath("~"), 
                  Convert.ToInt32( txtWidth.Text ),
                  Convert.ToInt32( txtHeight.Text )
                );

    theImage.ImageUrl = imagePath;

}

Figure 2

Ah I like this stuff!

Why to capture Webpages?

Well, there are various reasons for capturing webpages. Let's assume you have a webcatalog and want to display the webpages people added to it. A preview of the frontpage is often seen in such projects. Other webapplications offer services to show preview of webpages when the user is moving the mouse over links. Therefore you can use such techniques described in this article. I attached the sample-project but without the IECapt. This tool has to be downloaded from here. Have fun!

Reader-Comments:

Luis Antonio
9/18/2007 9:06:05 PM

Question

I need to take a screenshot of my aspx wue page, its creted dinamically and the site has a password, so , ti need to find a manner to take a picture of the page tht the client is seeing.... Can you give some ideas?

Thanks!!

Bert Vermeire
7/15/2008 3:23:13 PM

UrlScreenshot

Hey Guys, I wrapped the c# version of IECapt in an easy to use DLL.
This makes making screenshots a lot easier.

http://blog.taiki.be/index.php/2008/07/generating-screenshots-of-webpages-using-net/