Generate webpage thumbnail image (CSWinFormSaveWebpageToImage)

CSWinFormSaveWebpageToImage Overview

Summary:

The project illustrates how to save the webpage as an image.

The code sample creates a WebBrowser to retrieve the target webpage’s
html code and uses be WebBrowser.DrawToBitmap method convert the html
code to .bmp image. In this code-sample, users can set the image’s width,
height and browser’s width, height, generate an appropriate image.

Demo the Sample.

Please follow these demonstration steps below.

Step 1: Open the CSWinFormSaveWebpageToImage.sln.

Step 2: Expand the CSWinFormSaveWebpageToImage web application and press
Ctrl + F5 to show the MainForm.cs form.

Step 3: We will see a WebBrowser control, two TextBox controls, a Button,
and a PictureBox control on the form, you can find the WebBrowser
show a web page, the Save Page button will save the current web
page of WebBrowser control.

Step 4: Click the button to save an image in web application, you can also
preview it on the PictureBox control.

Step 5: If you update the image’s size with TextBox controls text, you can
retrieve the image in the root directory of web application.

Step 6: You can even click the link of the Default.htm page to redirect the
http://www.msdn.com, and click Save Page button to save the online
website’s page as an image, if you find the image can not contain
whole content of pages, please adjust width or height TextBox of
MainForm.cs form.

Step 7: Validation finished.

Implementation:

Step 1. Create a C# “Windows Forms Application” in Visual Studio 2010 or
Visual Web Developer 2010. Name it as “CSWinFormSaveWebpageToImage”.

Step 2. Add one windows form and one class file and named them as
“MainForm.cs”, “WebPageThumbnail.cs”.

Step 3. The WebPageThumbnail class used to receive image’s information and
generate an appropriate image with html code.

// Constructor method
public WebpageThumbnail(string data, int browserWidth, int browserHeight, int thumbnailWidth, int thumbnailHeight, ThumbnailMethod method)
{
this.Method = method;
if (method == ThumbnailMethod.Url)
{
this.Url = data;
}
else if (method == ThumbnailMethod.Html)
{
this.Html = data;
}
this.BrowserWidth = browserWidth;
this.BrowserHeight = browserHeight;
this.Height = thumbnailHeight;
this.Width = thumbnailWidth;
}

/// <summary>
/// Create a thread to execute GenerateThumbnailInteral method.
/// Because the <a title="Auto generated link to System.Windows.Forms.WebBrowser" href="http://msdn.microsoft.com/en-US/library/System.Windows.Forms.WebBrowser.aspx" target="_blank">System.Windows.Forms.WebBrowser</a> control has to
/// run on a STA thread while the current thread is MTA.
/// </summary>
/// 
public Bitmap GenerateThumbnail()
{
Thread thread = new Thread(new ThreadStart(GenerateThumbnailInteral));
thread.SetApartmentState(ApartmentState.STA);
thread.Start();
thread.Join();
return ThumbnailImage;
}

/// <summary>
/// This method creates WebBrowser instance retrieve the html code. Invoke WebBrowser_DocumentCompleted
/// method and convert html code to a bmp image.
/// </summary>
private void GenerateThumbnailInteral()
{
WebBrowser webBrowser = new WebBrowser();
try
{
webBrowser.ScrollBarsEnabled = false;
if (this.Method == ThumbnailMethod.Url)
{
webBrowser.Navigate(this.Url);
}
else
{
webBrowser.DocumentText = this.Html;
}
webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(WebBrowser_DocumentCompleted);
while (webBrowser.ReadyState != WebBrowserReadyState.Complete)
{
Application.DoEvents();
}
}
finally
{
webBrowser.Dispose();
}
}

private void WebBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
WebBrowser webBrowser = (WebBrowser)sender;
webBrowser.ClientSize = new Size(this.BrowserWidth, this.BrowserHeight);
webBrowser.ScrollBarsEnabled = false;
this.ThumbnailImage = new Bitmap(webBrowser.Bounds.Width, webBrowser.Bounds.Height);
webBrowser.BringToFront();
webBrowser.DrawToBitmap(ThumbnailImage, webBrowser.Bounds);
this.ThumbnailImage = (Bitmap)ThumbnailImage.GetThumbnailImage(Width, Height, null, IntPtr.Zero);
}

Step 4. In MainForm.cs form, we load the Default.htm page and use
a button named “btnSavePage” to create image.

public string rootDirectotyStr = string.Empty;
public MainForm()
{
InitializeComponent();

// Load web page of the application.
rootDirectotyStr = Application.StartupPath;
string webPageUrl = rootDirectotyStr + "\\Default.htm";
webBrowserTargetPage.Url = new Uri(webPageUrl, UriKind.RelativeOrAbsolute);
this.pctPreview.SizeMode = PictureBoxSizeMode.Zoom;
}

/// <summary>
/// Convert WebBrowser's web page as an image and rendering in this page.
/// You can also find an image in sample project root directory.
/// </summary>
/// 
/// 
private void btnSavePage_Click(object sender, EventArgs e)
{
try
{
// Image's size
int width;
int height;
if (!int.TryParse(tbWidth.Text.Trim(), out width) ||
!int.TryParse(tbHeight.Text.Trim(), out height))
{
MessageBox.Show("Width or height must be integer number.");
return;
}
if (width  2000 || height  6000)
{
MessageBox.Show("Width or height are too small or too large. Please change another one.", "Application Warning",
MessageBoxButtons.OK, MessageBoxIcon.Warning);
return;
}

// Save web page as an image in root directory, add an image in page.
string htmlCode = webBrowserTargetPage.DocumentText;
WebpageThumbnail thumb = new WebpageThumbnail(htmlCode, width, height, width, height, WebpageThumbnail.ThumbnailMethod.Html);
Bitmap imageWebpage = thumb.GenerateThumbnail();
imageWebpage.Save(rootDirectotyStr + "/image.bmp");
pctPreview.Load(rootDirectotyStr + "/image.bmp");
}
catch (Exception ex)
{
MessageBox.Show(ex.Message + " Please try again");
}
}

References:

MSDN: BitMap Class
http://msdn.microsoft.com/en-us/library/system.drawing.bitmap.aspx

MSDN: WebBrowser Class
http://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser.aspx

———————————————————————————-

Source: http://code.msdn.microsoft.com/windowsdesktop/CSWinFormSaveWebpageToImage-4dcb7aa6

8 thoughts on “Generate webpage thumbnail image (CSWinFormSaveWebpageToImage)

  1. Someone essentially lend a hand to make significantly articles
    I might state. That is the first time I frequented your website page
    and to this point? I surprised with the analysis you made to create this actual post incredible.
    Great task!

    1. Thank you Carol,
      I use this tool as a repository. For personal consultation and I take to help someone who has lost or is having the same difficulty I had one day.

      Regards, Zani.

  2. Someone necessarily lend a hand to make significantly articles I’d state.
    This is the first time I frequented your web page and so far?

    I surprised with the research you made to make this
    actual publish extraordinary. Wonderful process!

    1. Thank and thanks. I just believe in it, free knowledge… Your post make to me more power to write, same after work all week… Thanks and be welcome!

  3. Nice post. I learn something new and challenging on sites I stumbleupon on a daily basis.
    It will always be helpful to read articles from other authors and practice a little something from
    other sites.

  4. Very good blog! Do you have any tips for aspiring writers?
    I’m hoping to start my own blog soon but I’m a little lost on everything.
    Would you advise starting with a free platform like WordPress or go for
    a paid option? There are so many options out there that
    I’m totally overwhelmed .. Any ideas? Thanks!

    1. If your goal is only a blog to post news content think wordpress is an interesting tool.
      However, if you have time and knowledge, it would be cool to have it within your domain, as a “youhost.com / yourblog”. So have your website, so do what you want with it, and be well leave the full responsibility of those features WordPress blog.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s