將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