Converting Web Page to Image

We can convert web page to image and save to photo album.

Below code is about saving web page to one total image, and the other code is about saving web page to paged images.

1. Save web page to one image

- (void)saveWebPageToOneImage
{
    //get width & height
    float width = [[self.webPage stringByEvaluatingJavaScriptFromString:@"document.body.scrollWidth;"] floatValue];
    float height = [[self.webPage stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight;"] floatValue];
    float deviceHeight = 480.0f;

    int pages = ceil(height / deviceHeight);
    UIImage *viewImage = nil;
    UIGraphicsBeginImageContext(CGSizeMake(width, height));

    //set context offset with page
    for (int i = 0; i < pages; i++) {
        CGContextRef currentContext = UIGraphicsGetCurrentContext();
        [[[self.webPage subviews] lastObject] setContentOffset:CGPointMake(0, deviceHeight * i) animated:NO];
        [self.webPage.layer renderInContext:currentContext];
        CGContextTranslateCTM(currentContext, 0, deviceHeight);
        viewImage = UIGraphicsGetImageFromCurrentImageContext();
    }

    UIGraphicsEndImageContext();

    //save image to album
    UIImageWriteToSavedPhotosAlbum(viewImage,nil,NULL,NULL);
    [[[self.webPage subviews] lastObject] setContentOffset:CGPointZero animated:NO];
}

Result

2. Saving web page to paged images

- (void) saveWebPageToDevidedImage
{
    //get width & height
    float width = [[self.webPage stringByEvaluatingJavaScriptFromString:@"document.body.scrollWidth;"] floatValue];
    float height = [[self.webPage stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight;"] floatValue];
    float deviceHeight = 480.0f;

    int pages = ceil(height / deviceHeight);
    UIImage *viewImage = nil;
    UIGraphicsBeginImageContext(CGSizeMake(width, deviceHeight));

    //set webview page
    for (int i = 0; i < pages; i++) {
        CGContextRef currentContext = UIGraphicsGetCurrentContext();
        [[[self.webPage subviews] lastObject] setContentOffset:CGPointMake(0, deviceHeight * i) animated:NO];
        [self.webPage.layer renderInContext:currentContext];
        viewImage = UIGraphicsGetImageFromCurrentImageContext();

        //save image to album
        UIImageWriteToSavedPhotosAlbum(viewImage,nil,NULL,NULL);
    }

    UIGraphicsEndImageContext();

    [[[self.webPage subviews] lastObject] setContentOffset:CGPointZero animated:NO];
}

Result

 

..  and more images

You can download source code  here : https://github.com/lahi/draweb

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s