Click here to Skip to main content
15,867,308 members
Articles / Multimedia / GDI

HTML to Image in C#

Rate me:
Please Sign up or sign in to vote.
4.90/5 (38 votes)
13 Feb 2010CPOL2 min read 194.3K   121   46
Capture an HTML document as an image.

Introduction

In this article, I will show you how to capture an HTML document as an image using a WebBrowser object and the IViewObject.Draw method, which according to MSDN draws a representation of an object onto the specified device context. Before we get started, I just want to mention that the obtained results were identical to those obtained using commercial libraries, so I hope this will be useful to someone.

The IViewObject interface

The very first thing that we must do is to define the IViewObject interface.

C#
[ComVisible(true), ComImport()]
[GuidAttribute("0000010d-0000-0000-C000-000000000046")]
[InterfaceTypeAttribute(ComInterfaceType.InterfaceIsIUnknown)]
public interface IViewObject
{
    [return: MarshalAs(UnmanagedType.I4)]
    [PreserveSig]
    int Draw(
        [MarshalAs(UnmanagedType.U4)] UInt32 dwDrawAspect,
        int lindex,
        IntPtr pvAspect,
        [In] IntPtr ptd,
        IntPtr hdcTargetDev,
        IntPtr hdcDraw,
        [MarshalAs(UnmanagedType.Struct)] ref Rectangle lprcBounds,
        [MarshalAs(UnmanagedType.Struct)] ref Rectangle lprcWBounds,
        IntPtr pfnContinue,
        [MarshalAs(UnmanagedType.U4)] UInt32 dwContinue);
    [PreserveSig]
    int GetColorSet([In, MarshalAs(UnmanagedType.U4)] int dwDrawAspect, 
       int lindex, IntPtr pvAspect,[In] IntPtr ptd, 
       IntPtr hicTargetDev, [Out] IntPtr ppColorSet);
    [PreserveSig]
    int Freeze([In, MarshalAs(UnmanagedType.U4)] int dwDrawAspect, 
                    int lindex, IntPtr pvAspect, [Out] IntPtr pdwFreeze);
    [PreserveSig]
    int Unfreeze([In, MarshalAs(UnmanagedType.U4)] int dwFreeze);
    void SetAdvise([In, MarshalAs(UnmanagedType.U4)] int aspects, 
      [In, MarshalAs(UnmanagedType.U4)] int advf, 
      [In, MarshalAs(UnmanagedType.Interface)] IAdviseSink pAdvSink);
    void GetAdvise([In, Out, MarshalAs(UnmanagedType.LPArray)] int[] paspects, 
      [In, Out, MarshalAs(UnmanagedType.LPArray)] int[] advf, 
      [In, Out, MarshalAs(UnmanagedType.LPArray)] IAdviseSink[] pAdvSink);
}

Below is a summary description of the parameters that the Draw method takes (this is the only method we will use):

  • UInt32 dwDrawAspect - specifies the aspect to be drawn. Valid values are taken from the DVASPECT and DVASPECT2 enumerations. In this example, I'm using DVASPECT.CONTENT so the value passed is 1.
  • int lindex - portion of the object that is of interest for the draw operation. Currently, only -1 is supported.
  • IntPtr pvAspect - pointer to the additional information.
  • IntPtr ptd - describes the device for which the object is to be rendered. We will render for the default target device, so the value passed will be IntPtr.Zero.
  • IntPtr hdcTargetDev - information context for the target device indicated by the ptd parameter.
  • IntPtr hdcDraw - device context on which to draw.
  • ref Rectangle lprcBounds - the size of the captured image.
  • ref Rectangle lprcWBounds - the region of the WebBrowser object that we want to be captured.
  • IntPtr pfnContinue - pointer to a callback function (not used here).
  • UInt32 dwContinue - value to pass as a parameter to the function (not used here).

The HtmlCapture class

Now that we have defined our IViewObject interface, it is time to move on and create a class that will be used to capture a web page as an image.

C#
public class HtmlCapture
{
    private WebBrowser web;
    private Timer tready;
    private Rectangle screen;
    private Size? imgsize=null; 

    //an event that triggers when the html document is captured
    public delegate void HtmlCaptureEvent(object sender, 
                         Uri url, Bitmap image);
    public event HtmlCaptureEvent HtmlImageCapture;
    
    //class constructor
    public HtmlCapture() 
    {
       //initialise the webbrowser and the timer
       web = new WebBrowser();
       tready = new Timer();
       tready.Interval = 2000;
       screen = Screen.PrimaryScreen.Bounds;
       //set the webbrowser width and hight
       web.Width = screen.Width;
       web.Height = screen.Height;
       //suppress script errors and hide scroll bars
       web.ScriptErrorsSuppressed = true;
       web.ScrollBarsEnabled = false;
       //attached events
       web.Navigating += 
         new WebBrowserNavigatingEventHandler(web_Navigating);
       web.DocumentCompleted += new 
         WebBrowserDocumentCompletedEventHandler(web_DocumentCompleted);
       tready.Tick += new EventHandler(tready_Tick);
    }
         
    #region Public methods
    public void Create(string url)
    {
        imgsize = null;
        web.Navigate(url);
    }

    public void Create(string url,Size imgsz) 
    {
        this.imgsize = imgsz;
        web.Navigate(url);
    }
    #endregion 
         
    #region Events
    void web_DocumentCompleted(object sender, 
             WebBrowserDocumentCompletedEventArgs e)
    {
        //start the timer
        tready.Start();
    }

    void web_Navigating(object sender, WebBrowserNavigatingEventArgs e)
    {
        //stop the timer   
        tready.Stop();
    }

    void tready_Tick(object sender, EventArgs e)
    {
        //stop the timer
        tready.Stop();
        
        //capture html as an image
        //...
    }
    #endregion
}

As you can see, I'm using a Timer object to determine if the HTML document is fully loaded and can be captured. The reason I'm doing this is because an HTML document can trigger the DocumentCompleted event multiple times. After the document is fully loaded, the tready_Tick method is called.

C#
void tready_Tick(object sender, EventArgs e)
{
    //stop the timer
    tready.Stop();
    //get the size of the document's body
    Rectangle body = web.Document.Body.ScrollRectangle;

    //check if the document width/height is greater than screen width/height
    Rectangle docRectangle = new Rectangle()
    {
       Location=new Point(0,0),
        Size=new Size(body.Width > screen.Width ? body.Width : screen.Width,
         body.Height > screen.Height ? body.Height : screen.Height)
    };
    //set the width and height of the WebBrowser object
    web.Width = docRectangle.Width;
    web.Height = docRectangle.Height;
    
    //if the imgsize is null, the size of the image will 
    //be the same as the size of webbrowser object
    //otherwise  set the image size to imgsize
    Rectangle imgRectangle;
    if (imgsize == null)
        imgRectangle = docRectangle;
    else
        imgRectangle = new Rectangle()
        {
            Location=new Point(0,0),
            Size =imgsize.Value
        };
    //create a bitmap object 
    Bitmap bitmap = new Bitmap(imgRectangle.Width,imgRectangle.Height);
    //get the viewobject of the WebBrowser
    IViewObject ivo = web.Document.DomDocument as IViewObject;
     
    using (Graphics g = Graphics.FromImage(bitmap))
    {
        //get the handle to the device context and draw
        IntPtr hdc = g.GetHdc();
        ivo.Draw(1, -1, IntPtr.Zero, IntPtr.Zero,
                 IntPtr.Zero, hdc, ref imgRectangle, 
                 ref docRectangle, IntPtr.Zero, 0);
        g.ReleaseHdc(hdc);
    }
     //invoke the HtmlImageCapture event
    HtmlImageCapture(this, web.Url, bitmap);
}

Using the code

HtmlCapture has an overloaded method named Create. If you use the Create(string url) method, the size of the image will be the same as the size of the HTML document. If you want to create a thumbnail image of the HTML document, use Create(string url,Size imgsz).

C#
private void button2_Click(object sender, EventArgs e)
{
    HtmlCapture hc = new HtmlCapture();
    hc.HtmlImageCapture += 
       new HtmlCapture.HtmlCaptureEvent(hc_HtmlImageCapture);
    hc.Create("http://www.codeproject.com");
    //or
    hc.Create("http://www.codeproject.com",new Size(200,300)); 
}

void hc_HtmlImageCapture(object sender, Uri url, Bitmap image)
{
    image.Save("C:/"+ url.Authority+ ".bmp");
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Romania Romania
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Member 1451901426-Mar-22 8:45
Member 1451901426-Mar-22 8:45 
QuestionGreat! Pin
Member 1194959214-Nov-17 4:27
Member 1194959214-Nov-17 4:27 
QuestionGreat article, KB3057839 broke it Pin
alexn11-Jul-15 3:50
alexn11-Jul-15 3:50 
AnswerRe: Great article, KB3057839 broke it Pin
lkesh198425-Jul-15 3:55
lkesh198425-Jul-15 3:55 
QuestionAlternative to timers Pin
Mark J. Miller25-Jul-14 4:25
Mark J. Miller25-Jul-14 4:25 
GeneralMy vote of 1 Pin
Pankaj Nema12-Jun-14 23:10
Pankaj Nema12-Jun-14 23:10 
QuestionHTML to Image for .NET Pin
Farhomar14-May-14 2:02
Farhomar14-May-14 2:02 
QuestionHard find- Thank you!! Pin
mdsteenb22-Apr-14 10:48
mdsteenb22-Apr-14 10:48 
QuestionDoesn't work in own thread / problem Pin
LandWarrior4-May-13 6:35
LandWarrior4-May-13 6:35 
QuestionNullReferenceException when executing ivo.Draw() Pin
eljainc24-Jan-13 7:35
eljainc24-Jan-13 7:35 
QuestionNeed a bit of help Pin
Member 435448215-Nov-12 23:00
Member 435448215-Nov-12 23:00 
AnswerRe: Need a bit of help Pin
Member 435448216-Nov-12 1:46
Member 435448216-Nov-12 1:46 
GeneralMy vote of 5 Pin
Thialala24-Oct-12 0:00
Thialala24-Oct-12 0:00 
Questiongood! Pin
DadajiIn29-Jul-12 23:34
DadajiIn29-Jul-12 23:34 
GeneralMy vote of 4 Pin
Terence Wallace21-Jun-12 10:22
Terence Wallace21-Jun-12 10:22 
Questionusing statements Pin
gaurav_mittal7-May-12 20:03
gaurav_mittal7-May-12 20:03 
Questionit can not work in asp.net ! I already try it but fail , can you check it out? Pin
erictang20037-May-12 18:42
erictang20037-May-12 18:42 
QuestionCool Pin
Trong Vo1-May-12 20:57
Trong Vo1-May-12 20:57 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey26-Feb-12 21:26
professionalManoj Kumar Choubey26-Feb-12 21:26 
QuestionVery good Pin
lyfy721230-Dec-11 14:27
lyfy721230-Dec-11 14:27 
QuestionCannot compile Pin
CyberZeus27-Nov-11 21:42
CyberZeus27-Nov-11 21:42 
AnswerRe: Cannot compile Pin
CyberZeus28-Nov-11 2:50
CyberZeus28-Nov-11 2:50 
Questioncapturing only part of the web page Pin
Member 816805621-Oct-11 13:24
Member 816805621-Oct-11 13:24 
GeneralMy vote of 1 Pin
Member 789596113-Jul-11 0:16
Member 789596113-Jul-11 0:16 
QuestionWorks on all sites except CODEPROJECT.COM Pin
hienchu8-Jul-11 22:55
hienchu8-Jul-11 22:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.