Taking Snapshots in ASP.NET

Taking snapshots of web pages is used by many applications, for example Wordpress shows a small snapshot image of the page that a link directs to. In this post, I'll show how can we get snapshot image of a web page by using a small program, an .exe executable. Hence, it is the executable that creates the image actually and our asp.net page will make use of that .exe. First create a website, add a textbox and a button like below:

Define a class level string imageName code button's click event:

1. public partial class _Default : System.Web.UI.Page
2. {
3. string imageName = "shot.png";
4. 
   
5. protected void Button1_Click(object sender, EventArgs e)
6. {
7. string path = this.GetImage(TextBox1.Text, imageName, Request.PhysicalApplicationPath , 200, 100);
8. 
   
9. Response.Redirect("~/Default2.aspx?path=" + path);
10. }

Click event above uses GetImage() method, we will talk about soon, and assigns the path of the image to the QueryString of Default2.aspx, the page responsible for displaying snapshot image.

1. public string GetImage(string url, string name, string rootDir, int width, int height)
2. {
3. string fName = rootDir + "\\" + imageName;
4. Shot(url, rootDir);
5. System.Drawing.Image snapshotImage = System.Drawing.Image.FromFile(fName);
6. 
   
7. fName = rootDir + "\\" + "snapshots" + "\\" + name + ".png";
8. if (File.Exists(fName))
9. File.Delete(fName);
10. snapshotImage .Save(fName, ImageFormat.Png);
11. return name;
12. }

The GetImage() method, uses Shot() by assigning relative path of the image and root directory. After invoking Shot() method, it gets the image file that Shot() got and saved.

1. private void Shot(string url, string rootDir)
2. {
3. try
4. {
5. Process p = new Process();
6. p.StartInfo.FileName = rootDir + "IECapt.exe";
7. p.StartInfo.Arguments = String.Format("\"{0}\" \"{1}\"", url, rootDir + "\\" + imageName);
8. p.StartInfo.UseShellExecute = false;
9. p.StartInfo.CreateNoWindow = false;
10. p.Start();
11. p.WaitForExit();
12. p.Dispose();
13. 
    
14. Label1.Text = "Success :) !!!!!";
15. }
16. catch (Exception ex)
17. {
18. Label1.Text = ex.ToString();
19. }
20. }

This method defines a Process to start and execute a file. Then it sets up arguments (the sequence of them are same with the ones if you would use this .exe in command line).

If you want to add the feature of Wordpress (showing snapshots when hovering on links) you can implement the code above as a Web Service. Then using that service via JavaScript, or with JQuery library to make it more easy, you can get that functionality.

Note: IECapt.exe can be downloaded from here
Note: Because IECapt.exe takes snapshot of the whole page with very big resolution you should scale it in many scenarios.

Our simple Default2.aspx just has a Image control and two lines of code in Page_Load event handler to show the image:

1. protected void Page_Load(object sender, EventArgs e)
2. {
3. if (!string.IsNullOrEmpty(Request.QueryString["path"]))
4. {
5. Image1.ImageUrl = "~//" + Request.QueryString["path"].ToString();
6. Response.Write(Image1.ImageUrl);
7. }
8. }

protected void Page_Load(object sender, EventArgs e)

{

    if (!string.IsNullOrEmpty(Request.QueryString["path"]))

    {

        Image1.ImageUrl = "~//" + Request.QueryString["path"].ToString();

        Response.Write(Image1.ImageUrl);

    }

}