How to get ENTIRE image from UIWebView including offscreen content

Question

I have a method I use to get images from a various views in my iOS application for letting users email screens. Most of the screens where I draw are working ok, but when I use this technique with a UIWebView I only get the visible portion of the Screen. Anything off screen is not included in the rendered image. Been digging around here on Stack, but so far nothing I have found works?!

Here is the method I currently use:

-(NSData *)getImageFromView:(UIView *)view
{
    NSData *pngImg;
    CGFloat max, scale = 1.0;
    CGSize size = [view bounds].size;

    // Scale down larger images else we run into mem issues with mail widget
    max = (size.width > size.height) ? size.width : size.height;
    if( max > 960 )
        scale = 960/max;

    UIGraphicsBeginImageContextWithOptions( size, YES, scale );

    CGContextRef context = UIGraphicsGetCurrentContext();
    [view.layer renderInContext:context];    
    pngImg = UIImagePNGRepresentation( UIGraphicsGetImageFromCurrentImageContext() );

    UIGraphicsEndImageContext();    
    return pngImg;
}

Cliff Ribaudo · Accepted Answer · 2012-03-31T15:26:37.703

Wow the answer was stupidly simple... was digging all over the place looking at various Printing/PDF related stuff... then it occurred to me, why not just set the view IN THE CONTEXT to a sizeThatFits. It worked!

WARNING: No guarantee you don't run into mem issues with this and I DO suggest you do this inside an @autoreleasepool pool and consider doing some scaling as I do in the example, but THIS WORKS and is what I settled on:

-(NSData *)getImageFromView:(UIView *)view  // Mine is UIWebView but should work for any
{
    NSData *pngImg;
    CGFloat max, scale = 1.0;
    CGSize viewSize = [view bounds].size;

    // Get the size of the the FULL Content, not just the bit that is visible
    CGSize size = [view sizeThatFits:CGSizeZero];

    // Scale down if on iPad to something more reasonable
    max = (viewSize.width > viewSize.height) ? viewSize.width : viewSize.height;
    if( max > 960 )
        scale = 960/max;

    UIGraphicsBeginImageContextWithOptions( size, YES, scale );

    // Set the view to the FULL size of the content.
    [view setFrame: CGRectMake(0, 0, size.width, size.height)];

    CGContextRef context = UIGraphicsGetCurrentContext();
    [view.layer renderInContext:context];    
    pngImg = UIImagePNGRepresentation( UIGraphicsGetImageFromCurrentImageContext() );

    UIGraphicsEndImageContext();
    return pngImg;    // Voila an image of the ENTIRE CONTENT, not just visible bit
}

FYI - This can be slow on larger pages, but [you can do the rendering on a background queue](http://stackoverflow.com/a/10954342/168594). (But you must do the frame manipulation on the main queue. — zekel, Jun 25 '13 at 20:24

score 1 · Answer 2 · answered Mar 27 '12 at 23:06

I created a category for this a while ago. It works if (and only if) the web view is cached into memory, otherwise parts of the page will appear as white.

#import "UIWebView+Screenshot.h"
#import <QuartzCore/QuartzCore.h>

@implementation UIWebView (Screenshot)

- (UIImage *)screenshot {
UIImage *img = nil;

    UIGraphicsBeginImageContextWithOptions(self.scrollView.contentSize, self.scrollView.opaque, 0.0);
    {
        CGPoint savedContentOffset = self.scrollView.contentOffset;
        CGRect savedFrame = self.scrollView.frame;

        self.scrollView.contentOffset = CGPointZero;
        self.scrollView.frame = CGRectMake(0, 0, self.scrollView.contentSize.width, self.scrollView.contentSize.height);
        [self.scrollView.layer renderInContext: UIGraphicsGetCurrentContext()];
        img = UIGraphicsGetImageFromCurrentImageContext();

        self.scrollView.contentOffset = savedContentOffset;
        self.scrollView.frame = savedFrame;
    }
    UIGraphicsEndImageContext();

    return img;
}

@end

score 0 · Answer 3 · answered Nov 26 '19 at 13:49

WKWebView has a more convenient way of doing it these days

Assign this delegate to the webviews navigation delegate and implement the completion handler to get the image back

class WebviewDelegate: NSObject, WKNavigationDelegate {

    var completion: ((UIImage?) -> ())?

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        webView.evaluateJavaScript("document.body.offsetHeight;") { (result, error) in
            if let height = result as? CGFloat {
                let config = WKSnapshotConfiguration()
                config.rect = CGRect(x: 0, y: 0, width: webView.scrollView.contentSize.width, height: height)

                webView.takeSnapshot(with: config) { (image, error) in
                    self.completion?(image)
                }
            }
        }
    }
}

score 0 · Answer 4 · answered Mar 27 '12 at 00:53

0

You could zoom the uiwebview out so that all content fits on the screen...but this will only work if the image is off the screen horizontally. If the UIWebView is longer than the screen then this won't do much.

[webview.scrollView setZoomScale:webview.scrollView.minimumZoomScale animated:NO];

answered Mar 27 '12 at 00:53

Michael Frederick

16,664
3
43
58

Thanks, but unfortunately most of my content is in the vertical direction. – Cliff Ribaudo Mar 27 '12 at 04:09

How to get ENTIRE image from UIWebView including offscreen content

4 Answers4

Linked