Click here to Skip to main content
Licence 
First Posted 17 Aug 2006
Views 87,357
Bookmarked 88 times

Webpage thumbnailer

By | 17 Aug 2006 | Article
An article on how to get a webpage thumbnail and give your favorite links a face.

Introduction

Once upon a time, I got an idea to have a thumbnail of a webpage associated with each URL that I had on my list. Sort of a URL with "face" :). I began to research on how to implement it, and found no solution for it in the open software domain. Many that I found were commercial products in the form of components and standalone programs. I'm just a poor programmer, and couldn't spend much to buy such a component. I was sure that there would be a way (even several) to achieve this goal without touching my child's spare money. And what I present in this article is what I found.

Using the code

Before you get into the code, you can build it and play around with it. The URL should be in a form http://www.yoursite.com, for example. I didn't write URL validation code, so you have to be careful about it. The project is very simple, and there are only a couple of points that I have to mention. To get the thumbnail image of the webpage, I use the WebBrowser component that comes with Visual Studio 2005 and is a part of the .NET framework v.2. I placed it on a BrowserForm, and set the size of the form to approximately 600 to 800 pixels to get enough visual data. Then, the BrowserForm is initialized, but is actually never shown. And this makes a trick.

private void TestForm_Load(object sender, EventArgs e) {
 browserForm = new BrowserForm(); 
}

What I have to do then is to take a snapshot of the WebBrowser after the page is loaded. That's all!

  Bitmap docImage = new Bitmap(600, 800);
  webBrowser1.DrawToBitmap(docImage, new Rectangle(webBrowser1.Location.X, 
          webBrowser1.Location.Y, webBrowser1.Width, webBrowser1.Height));
}

The page takes some time to load, and because of that, I've split the getting of the image in to three steps:

  1. I call the method getImageFromUrl(string url) on a BrowserForm that starts downloading the page from a given URL.
  2. The WebBrowser event DocumentCompleted is handled by the procedure webBrowser1_DocumentCompleted. It sets the image of the current DocPic object.
  3. The setter of the current DocPic object triggers the refreshPicture event that updates the displayed picture. Some resizing is made on place.

All code provided is purely for demonstration purposes only, so don't try to find design issues in it. You'll certainly find it if you try.

History

It's nice to know that on your website I can write history :). Thanks to the admin!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

dooskoobi

Web Developer

Belgium Belgium

Member



Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
GeneralThanks PinmemberMember 780982219:39 3 Apr '11  
Questionapplet problem Pinmemberdomartins7:55 10 May '08  
QuestionHow save image Pinmemberrashidpervaiz0823:22 6 Feb '08  
GeneralReal height PinmemberBizounours2:58 19 Nov '07  
AnswerRe: Real height Pinmemberdooskoobi9:42 19 Nov '07  
GeneralRe: Real height PinmemberBizounours21:07 19 Nov '07  
AnswerRe: Real height - SOLUTION Pinmembertfpds3:28 12 Dec '07  
QuestionBlank Image on Websites with Java Applets PinmemberJon Ebersole12:58 9 Feb '07  
AnswerRe: Blank Image on Websites with Java Applets PinmemberWei Tian20:26 23 Mar '09  
QuestionHow to fix blank image? PinmemberMatt34214:16 29 Dec '06  
QuestionASP.Net environment PinmemberFranck Quintana7:24 26 Oct '06  
AnswerRe: ASP.Net environment Pinmemberdooskoobi10:51 26 Oct '06  
GeneralRe: ASP.Net environment PinmemberFranck Quintana15:27 27 Oct '06  
GeneralRe: ASP.Net environment Pinmembergedw996:36 27 May '07  
GeneralRe: ASP.Net environment PinmemberFranck Quintana23:24 27 May '07  
GeneralRe: ASP.Net environment PinmemberDmitryKirsanov10:24 12 Oct '11  
GeneralFixed blank image [modified] PinmemberRandall Stephens6:13 16 Oct '06  
GeneralRe: Fixed blank image [modified] PinmemberNutSoft1:37 16 Nov '06  
Has anybody got any suggestions as to how I can overcome my problem?
 
I've tried comparing images for blank bitmaps, but my problem is that I'm displaying a web page that is bigger than the visible area of the webBrowser control. The resulting image is black beyond the part of the image that would normally not be visible. Prior to drawing the bitmap I have tried resizing the form, but to no avail. If I scroll to the bottom of the web page before capturing the image I get just a blank white image (with black in the areas as above).
 

-- modified at 4:56 Thursday 23rd November, 2006
 
I have found a way to overcome my problems - my article at http://www.codeproject.com/useritems/XML_Tool.asp[^] provides code and a demo to show how I acheived this.
GeneralBlank Image Pinmembersides_dale16:32 8 Sep '06  
GeneralRe: Blank Image Pinmemberdooskoobi12:23 9 Sep '06  
GeneralRe: Blank Image PinmemberNoah Nadeau5:51 4 Apr '08  
GeneralRe: re "I can write history:" PinmemberBillWoodruff0:59 26 Aug '06  
GeneralNice find PinmemberSimone Busoli6:58 23 Aug '06  
GeneralRe: Nice find Pinmemberdooskoobi8:49 24 Aug '06  
GeneralNice, but I've got a problem PinmemberDario Solera7:47 18 Aug '06  

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.

Permalink | Advertise | Privacy | Mobile
Web04 | 2.5.120529.1 | Last Updated 17 Aug 2006
Article Copyright 2006 by dooskoobi
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid