How to capture a full-sized Image of a Webpage

[Churchillrl]

Hi,

I am working on a personal vb.net project that will allow me to capture a full-sized image of a given web page. I've been working on this for a few of days and have not found a method that is 100% reliable. Here's what i have tried so far...

METHOD #1 - Using WebBrowser Control and CopyFromScreen

Problem: Fails to capture the entire content of the page if part of it is off screen, obscured, or requires scrolling.

Private Sub btnCopyScreen_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnCopyScreen.Click

 Const ScrollbarWidth = 18

 ' Initialize a new bitmap with the same size as the webbrowser's client area
 Dim Bmp As New Bitmap(WebBrowser1.ClientRectangle.Width - ScrollbarWidth, WebBrowser1.ClientRectangle.Height - ScrollbarWidth)

 ' Initialize a reference to the bitmap's drawing area
 Dim gBmp As Graphics = Graphics.FromImage(Bmp)

 ' Capture Fullsize Screen Shot
 gBmp.CopyFromScreen(WebBrowser1.PointToScreen(New Point(0, 0)), New Point(0, 0), New Size(WebBrowser1.Width - ScrollbarWidth, WebBrowser1.Height - ScrollbarWidth))
 Bmp.Save("c:\temp1.png")

 ' Capture Thumbnail
 Bmp = Bmp.GetThumbnailImage(160, 120, Nothing, IntPtr.Zero)
 Bmp.Save("c:\temp2.png")

 ' Housekeeping
 gBmp.Dispose()
 Bmp.Dispose()

End Sub

METHOD #2 - Using hidden webbrowser object and DrawToBitmap

Problem: DrawToBitmap is not public member of webbrowser object, but works if
implemented as shown below. However, it fails to render an image on some websites (Yahoo, Paypal, etc...). Making it not an entirely acceptable solution.

Private Sub btnDrawBmp_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDrawBmp.Click

 ' Initialize new Hidden Browser control and navigate to site
 Dim Browser As New WebBrowser
 Browser.ScrollBarsEnabled = False
 Browser.Navigate(TextBox1.Text)

 ' Initialize Handler for DocumentCompleted event and wait for that event to fire
 AddHandler Browser.DocumentCompleted, AddressOf Browser_DocumentCompleted
 While Browser.ReadyState <> WebBrowserReadyState.Complete
     Application.DoEvents()
 End While

 ' Housekeeping
 Browser.Dispose()

End Sub

Private Sub Browser_DocumentCompleted(ByVal sender As Object, ByVal e As WebBrowserDocumentCompletedEventArgs)

 ' If sender was a WebBrowser then initialize a reference to it otherwise throw an exception
 Dim Browser As WebBrowser = DirectCast(sender, WebBrowser)

 ' Set browser start size, determine scrollheight, resize browser to match scrollheight
 Browser.ClientSize = New Size(1024, 768)
 Dim Height As Integer = Browser.Document.Body.ScrollRectangle.Bottom
 Browser.ClientSize = New Size(1024, Height)

 ' Initialize bitmap to match width & scrollheight for fullsize screen capture
 Dim Bmp = New Bitmap(Browser.Bounds.Width, Height)

 ' Capture fullsize screen shot
 Browser.DrawToBitmap(Bmp, Browser.Bounds)
 Bmp.Save("c:\temp1.png")

 ' Resize Browser for thumbnail capture
 Browser.ClientSize = New Size(1024, 768)

 ' Inialize a new bitmap with the same client area size as the browser
 Dim Bmp2 = New Bitmap(Browser.Bounds.Width, Browser.Bounds.Height)

 ' Perform screen capture, convert it to a thumbnail, and save
 Browser.DrawToBitmap(Bmp2, Browser.Bounds)
 Bmp2 = Bmp2.GetThumbnailImage(160, 120, Nothing, IntPtr.Zero)
 Bmp2.Save("c:\temp2.png")

 ' Housekeeping
 Bmp.Dispose()
 Bmp2.Dispose()

End Sub

In short I'm looking for a solution to either of the problems outlined above.
Or, if need be, help understanding the GDI calls necessary to accompish this
task with the WIN32 API. Note: I'm not interested in 3rd party controls, so please
dont recommend them.

Thankyou for your interest in my problem.
-RC

[kvprajapati]

Have a look at http://www.codeproject.com/KB/vb/WebCapture.aspx

[Churchillrl]

That project suffers from the same problem I described above. I downloaded the project, and it too fails on yahoo and eBay.

Thanks for trying...
-RC

[lordis]

Have you found a solution to this? I was testing your code (method #2), and monitoring the temp1.png at the same time. At some point the temp1.png was showing the correct page(yahoo e.g.) but when the code was fully executed there was only a big white image.
PS. I was testing this on a real slow machine/internet connection.

Thomas

[weiloong89]

Hi Bro had u solved this problem? I'm suffering on this problem too. Hope you able to help. Appreciated.

[tinstaafl]

Here's a thought would setting the WebBrowser1.Document.Window.ResizeTo() method shrink the document to the size of the screen?

[weiloong89]

@tinstaafl, i tried your solution but it won't really shink to smaller size. still the same.

[weiloong89]

@tinstaafl Thank u anyway.

[larrykjr]

I was having the same issue, just an image that was all white. Try, after resizing the browser adding a short loop, say 250 ms with application.doevents after the resize is done before capturing the image.

[Sandeep_19]

Any Luck??I am unable to capture the screenshot with scroll

[_1_18]

1. You have a background image(screen-fitting).
2. You want to have two images on top of it and have them clickable.

<div id="backgroundDiv" class="cssForbackgroundImg">
<div id="firstClickable" class="positionwhereyouwant">
<img src="firstImgUrl.png">
</div>
</div id="secondClickable" class="positionwhereyouwant">
<img src="secImgUrl.png">
</div>
</div>

Now attach jquery click event to both "firstClickable" and "secondClickable" to do what you want on click of those elements.