Rendering a UIWebView into an ImageContext

Question

I am trying to capture the contents of a UIWebView including that which is not visible to the user. i.e. The whole web page even though the user is only looking at the top.

Looking around I found the best way to capture a UIView is to retrieve its layer and use renderInContext.

However, UIWebView seems to be using its own CALayer implementation which is behaving a lot more like CATiledLayer, although it is still claiming to be a standard CALayer. When I call renderInContext I only get one portion of the web page, up to 940px down, as opposed to the whole page.

Has anyone got any ideas on how to either: force the UIWebView to scroll down another 940px (obviously that is far from ideal) or tell whatever breed of CALayer it is backing the WebView to render all of its content when I ask it to.

Cheers

EDIT: I should add that currently change the frame of the webview to fit the size of the page retrieved through javascript.

Answer 1

I've released an app (Web2Pic) doing that, and please trust me that UIGraphicsBeginImageContext(webView.frame.size); can do nothing except getting a small image from the visible area in our UIWebView ;-(

The right way is a bit complex but it just works:

1.Use JavaScript in our UIWebView to get these float values:

   //Whole page size in HTML coordinate
   document.body.scrollWidth
   document.body.scrollHeight
   //UIWebView visible size in HTML coordinate
   window.innerWidth
   window.innerHeight

2.Now we can 'cut' the whole page into dozens of UIWebView-sized small pieces. Then we can capture every small pieces individually and save them into our Cache. I implemented this by calculating page-offsets and use UIGraphicsBeginImageContext(webView.frame.size); to get a array of images. In addition, you should cache the image array into the file system, or the app will eventually crash!

3.When we finally got all the small pieces, we can start a full-resolution context: UIGraphicsBeginImageContext(CGSizeMake(document.body.scrollWidth,document.body.scrollHeight));

4.Render every small images into the big context based on the coordinates. And be careful to the corners, the last image in every line/row may not be a full image.

5.There is still one step left: saving the big image. Do not save it into the PhotoAlbum, because iOS will automatically cut down the resolution of images in the album. Instead, we can save it into the file system and enable the app's iTunes File Share support, or even write a simple in-app photo manager.

Hope these can help ;-)

Yichao Peak Ji

Answer 2

Set the height of webview equal to the contentsize of scrollview of webview.

-(UIImage *)captureImage:(UIWebView *)webvw
{
    webvw.frame=CGRectMake(webvw.frame.origin.x, webvw.frame.origin.y, webvw.frame.size.width, webvw.scrollView.contentSize.height);
    UIGraphicsBeginImageContextWithOptions(webvw.frame.size, NO, 0.0f);
    [webvw.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *screenshot = UIGraphicsGetImageFromCurrentImageContext();
    return screenshot;
}