将UIWebView显示的内容转为图片和PDF

iOS

今天开发Evermark时要用到将UIWebView中显示的内容转为图片，方便转发到各个社交网络（Twitter,Facebook,Weibo），这样内容就不受长度限制，类似于长微博。 之前关于视图转图片我知道可以通过QuartzCore里截图的形式，但是截图只能截取当前屏幕所显示的区域(UIGraphicsGetCurrentContext())，而UIWebView的内容可能比屏幕长得多，在网上搜了一下，没有找到更好的方法，所有只有将UIWebView分屏截取，然后将截取的图片拼接成一张图片。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
- (UIImage *)imageRepresentation{
    CGSize boundsSize = self.bounds.size;
    CGFloat boundsWidth = self.bounds.size.width;
    CGFloat boundsHeight = self.bounds.size.height;
    
    CGPoint offset = self.scrollView.contentOffset;
    [self.scrollView setContentOffset:CGPointMake(0, 0)];
    
    CGFloat contentHeight = self.scrollView.contentSize.height;
    NSMutableArray *images = [NSMutableArray array];
    while (contentHeight > 0) {
        UIGraphicsBeginImageContext(boundsSize);
        [self.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        [images addObject:image];
        
        CGFloat offsetY = self.scrollView.contentOffset.y;
        [self.scrollView setContentOffset:CGPointMake(0, offsetY + boundsHeight)];
        contentHeight -= boundsHeight;
    }
    [self.scrollView setContentOffset:offset];
    
    UIGraphicsBeginImageContext(self.scrollView.contentSize);
    [images enumerateObjectsUsingBlock:^(UIImage *image, NSUInteger idx, BOOL *stop) {
        [image drawInRect:CGRectMake(0, boundsHeight * idx, boundsWidth, boundsHeight)];
    }];
    UIImage *fullImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return fullImage;
}

将UIWebView从头，contentOffset = (0, 0)，开始截取webView.bounds.size.height高度的图片，然后将_webView可见区域下移继续截屏，这样将所有截取的图片按照顺序拼接，就能得到整个UIWebView显示内容的完整图片。（不知道有没有更好的方法）

本以为用同样的方法就能生成PDF文件

image

但是通过UIGraphics生成的PDF其实就是图片，文字都没法选中，而且质量也不高，所以继续查找其他方法。发现UIPrintPageRenderer可以实现渲染视图绘制的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
- (NSData *)PDFData{
    UIViewPrintFormatter *fmt = [self viewPrintFormatter];
    UIPrintPageRenderer *render = [[UIPrintPageRenderer alloc] init];
    [render addPrintFormatter:fmt startingAtPageAtIndex:0];
    CGRect page;
    page.origin.x=0;
    page.origin.y=0;
    page.size.width=600;
    page.size.height=768;
    
    CGRect printable=CGRectInset( page, 50, 50 );
    [render setValue:[NSValue valueWithCGRect:page] forKey:@"paperRect"];
    [render setValue:[NSValue valueWithCGRect:printable] forKey:@"printableRect"];
    
    NSMutableData * pdfData = [NSMutableData data];
    UIGraphicsBeginPDFContextToData( pdfData, CGRectZero, nil );
    
    for (NSInteger i=0; i < [render numberOfPages]; i++)
    {
        UIGraphicsBeginPDFPage();
        CGRect bounds = UIGraphicsGetPDFContextBounds();
        [render drawPageAtIndex:i inRect:bounds];
        
    }
    UIGraphicsEndPDFContext();
    return pdfData;
}

通过这种方式生成的PDF质量高，与浏览器“打印”功能显示出的内容一样

image1

代码已上传github (https://github.com/tracy-e/UIWebViewToFile)

========全文完============