Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create Thumbnail Image in .NET

The tutorial focuses on the technique to create thumbnail image in Dot Net making use of .NET Framework.

In order to generate image of a web page, first we need to load the web page to get their html code, and then this html needs to be rendered in a web browser. After that, a screen shot can be taken easily.

WebBrowser control in .NET framework

In .NET framework we have a new Windows Forms WebBrowser control which is a wrapper around old shwdoc.dll. All you really need to do is to drop a WebBrowser control from your Toolbox on your form in .NET framework.

Shows the .NET Framework and the Common Controls present

Figure 1: Shows the .NET Framework and the Common Controls present

If you have not used WebBrowser control yet, it's quite easy to use and very consistent with other Windows Forms controls. Some important methods of WebBrowser control are.

Listing 1: Methods of WebBrowser Control

public bool GoBack();
public bool GoForward();
public void GoHome();
public void GoSearch();
public void Navigate(Uri url);
public void DrawToBitmap(Bitmap bitmap, Rectangle targetBounds);

These methods are self explanatory with their names like Navigate function which redirects browser to provided URL. It also has a number of useful overloads. The DrawToBitmap (inherited from Control) draws the current image of WebBrowser to the provided bitmap.

Using WebBrowser control in ASP.NET 2.0

So, we have a WebBrowser control which is a windows forms control (in namespace System.Windows.Forms) and can do the required job. The first question will be "Can we use this control in ASP.NET?" The answer is "Yes" but there will be 2 issues which need to be discussed. First, being a Windows Form control, this must operate on an STA (Single Threaded Apartment) thread. This means you need to either set the AspCompat = "true" attribute on the page that uses it, or you need to make the actual Webbrowser Navigate call to the target page on a secondary thread whose state has been set to STA. We will choose the latter one and the other gotcha is that the Webbrowser control does its navigation on more than one thread i.e. the call to webBrowser.Navigate(url) is asynchronous. Since we are in other thread and the browser creates a separate thread for navigation (actually it doesn't creates a separate thread instead it uses one from ThreadPool).

Also by the canonical windows rule: Only the thread that creates a control, accesses the control. We need to somehow allow the control to take the flow of the thread and do its work. Navigate only tells it that it should perform the action and immediately exits. The DocumentCompleted event handler is fired when the browser has fully loaded the target Url, and therefore it is in this event that we want to do our business logic.

The Solution

Let's start to implement the solution which we discussed above. First we will define a static method to get the web site thumbnail image.

Listing 2: Defining the static method

public static Bitmap GetWebSiteThumbnail(string Url, int BrowserWidth, int BrowserHeight, intThumbnailWidth, int ThumbnailHeight)
{
  WebsiteThumbnailImage thumbnailGenerator = new WebsiteThumbnailImage(Url, BrowserWidth, BrowserHeight, ThumbnailWidth, ThumbnailHeight);
  return thumbnailGenerator.GenerateWebSiteThumbnailImage();
}

The WebsiteThumbnailImage class will have a public method named GenerateWebSiteThumbnailImage which will generate the website thumbnail image in a separate STA thread and wait for the thread to exit. In this case, we will join method of Thread class to block the initial calling thread until the bitmap is actually available, and then return the generated web site thumbnail.

Listing 3: Joining Thread class method

public Bitmap GenerateWebSiteThumbnailImage()
{
  Thread m_thread = new Thread(new ThreadStart(_GenerateWebSiteThumbnailImage));
  m_thread.SetApartmentState(ApartmentState.STA);
  m_thread.Start();
  m_thread.Join();
  return m_Bitmap;
}

The _GenerateWebSiteThumbnailImage will create a WebBrowser control object and navigate to the provided Url. We also register for the DocumentCompleted event of the web browser control to take screen shot of the web page. To pass the flow to the other controls we need to perform a method call to Application.DoEvents(); and wait for the completion of the navigation until the browser state changes to Complete in a loop.

Listing 4: Firing the _GenerateWebsiteThumbnailImage Event

private void _GenerateWebSiteThumbnailImage()
{
  WebBrowser m_WebBrowser = new WebBrowser();
  m_WebBrowser.ScrollBarsEnabled = false;
  m_WebBrowser.Navigate(m_Url);
  m_WebBrowser.DocumentCompleted += new WebBrowserDocument
  CompletedEventHandler(WebBrowser_DocumentCompleted);
  while (m_WebBrowser.ReadyState != WebBrowserReadyState.Complete)
    Application.DoEvents();
  m_WebBrowser.Dispose(); 
}

The DocumentCompleted event will be fired when the navigation is completed and the browser is ready for screen shot. We will get screen shot using DrawToBitmap method as described previously which will return the bitmap of the web browser. Then the thumbnail image is generated using GetThumbnailImage method of Bitmap class passing it the required thumbnail image width and height.

Listing 5: Firing the DocumentCompleted event

private void WebBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
  WebBrowser m_WebBrowser = (WebBrowser)sender;
  m_WebBrowser.ClientSize = new Size(this.m_BrowserWidth, this.m_BrowserHeight);
  m_WebBrowser.ScrollBarsEnabled = false;
  m_Bitmap = new Bitmap(m_WebBrowser.Bounds.Width, m_WebBrowser.Bounds.Height);
  m_WebBrowser.BringToFront();
  m_WebBrowser.DrawToBitmap(m_Bitmap, m_WebBrowser.Bounds);
  m_Bitmap = (Bitmap)m_Bitmap.GetThumbnailImage(m_ThumbnailWidth, m_ThumbnailHeight,null, IntPtr.Zero);
}

Conclusion

The article explains an easy way to generate thumbnail images of websites. This is done making use of the new WebBrowser control in .NET framework.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login