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

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

- (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可以实现渲染视图绘制的内容。

- (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)

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

Posted by XiaoYi_HD - 6月 10 2013
如需转载，请注明：本文来自 Esoft Mobile