Thursday, September 09, 2010

How to convert Html page to a Image using WebBrowser in Asp.net

Thumbnail Image:
public class Thumbnail
{
    public string Url { getset; }
    public Bitmap ThumbnailImage { getset; }
    public int Width { getset; }
    public int Height { getset; }
    public int BrowserWidth { getset; }
    public int BrowserHeight { getset; }
 
    public Thumbnail(string Url, int BrowserWidth, int BrowserHeight, int ThumbnailWidth, int ThumbnailHeight)
    {
        this.Url = Url;
        this.BrowserWidth = BrowserWidth;
        this.BrowserHeight = BrowserHeight;
        this.Height = ThumbnailHeight;
        this.Width = ThumbnailWidth;
    }
    public Bitmap GenerateThumbnail()
    {
        Thread thread = new Thread(new ThreadStart(GenerateThumbnailInteral));
        thread.SetApartmentState(ApartmentState.STA);
        thread.Start();
        thread.Join();
        return ThumbnailImage;
    }
    private void GenerateThumbnailInteral()
    {
        WebBrowser webBrowser = new WebBrowser();
        webBrowser.ScrollBarsEnabled = false;
        webBrowser.Navigate(this.Url);
        webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(WebBrowser_DocumentCompleted);
        while (webBrowser.ReadyState != WebBrowserReadyState.Complete) Application.DoEvents();
        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, nullIntPtr.Zero);
    }
}
Test Page:
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script runat="server">
        protected void CreateThumbnailImage(object sender, EventArgs e)
        {
            string url = string.Format("http://{0}", txtWebsiteAddress.Text);
            int width = Int32.Parse(txtWidth.Text);
            int height = Int32.Parse(txtHeight.Text);
            Thumbnail thumbnail = new Thumbnail(url, 800, 600, width, height);
            Bitmap image = thumbnail.GenerateThumbnail();
            image.Save(Server.MapPath("~") + "/Thumbnail.bmp");
            imgThumbnailImage.ImageUrl = "~/Thumbnail.bmp";
            imgThumbnailImage.Visible = true;
        }     
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtWebsiteAddress" runat="server" Text="www.google.com" /> 
        <asp:Button ID="btnCreateThumbnailImage" runat="server" Text="Create Thumbnail Image" OnClick="CreateThumbnailImage" /></td>
        <asp:TextBox ID="txtWidth" runat="server" Text="200" />
        <asp:TextBox ID="txtHeight" runat="server" Text="200" />
        <asp:Image ID="imgThumbnailImage" runat="server" Visible="false" />
    </div>
    </form>
</body>
</html>

6 comments:

Sagar Singh said...

Hey the article is kool but there us a small problem..the web browser control will work with inter explore only..how can i do the same with other browser.Any idea?

Mohammad Fawaz said...

Thanks for you

-----------

http://mfawazsp.blogspot.com

Anonymous said...

Works great if not flash on target page ;)

Jonatan Machado said...

Great!
\o/

Anonymous said...

Hi,
How can I convert a div with id='divprint' as image and print the image using this code? I want to print the div content without any margin, header or footer.

Thank You.
Zukiari

Charith Shyam Gunasekara said...

But unfortunately you have to load the div in to separate HTML page in order to get it printed. or else, load the page with specific style sheet where it hide all the other stuff except the required div you are interested.

Azure Storage Account Types

Defferent Types of Blobs Block blobs store text and binary data. Block blobs are made up of blocks of data that can be managed individually...