iOS 截圖的那些事兒

weixin_34232744發表於2018-06-03
iOS

同時按下 Home 鍵和電源鍵，咔嚓一聲，就得到了一張手機的截圖，這操作想必 iPhone 使用者再熟悉不過了。我們作為研發人員，面對的是一個個的 View，那麼該怎麼用程式碼對 View 進行截圖呢？
這篇文章主要討論的是如何在包括 UIWebView 和 WKWebView 的網頁中進行長截圖，對應的示例程式碼在這兒：github.com/VernonVan/P…。

UIWebView 截圖

對 UIWebView 截圖比較簡單，renderInContext 這個方法相信大家都不會陌生，這個方法是 CALayer 的一個例項方法，可以用來對大部分 View 進行截圖。我們知道，UIWebView 承載內容的其實是作為其子 View 的 UIScrollView，所以對 UIWebView 截圖應該對其 scrollView 進行截圖。具體的截圖方法如下：

- (void)snapshotForScrollView:(UIScrollView *)scrollView
{
    // 1. 記錄當前 scrollView 的偏移和位置
    CGPoint currentOffset = scrollView.contentOffset;
    CGRect currentFrame = scrollView.frame;

    scrollView.contentOffset = CGPointZero;
    // 2. 將 scrollView 展開為其實際內容的大小
    scrollView.frame = CGRectMake(0, 0, scrollView.contentSize.width, scrollView.contentSize.height);

    // 3. 第三個引數設定為 0 表示設定為螢幕的預設縮放因子
    UIGraphicsBeginImageContextWithOptions(scrollView.contentSize, YES, 0);
    [scrollView.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *snapshotImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    // 4. 重新設定 scrollView 的偏移和位置，還原現場
    scrollView.contentOffset = currentOffset;
    scrollView.frame = currentFrame;
}
複製程式碼


WKWebView 截圖

雖然 WKWebView 裡也有 scrollView，但是直接對這個 scrollView 截圖得到的是一片空白的，具體原因不明。一番 Google 之後可以看到好些人提到 drawViewHierarchyInRect方法， 可以看到這個方法是 iOS 7.0 開始引入的。官方文件中描述為：

Renders a snapshot of the complete view hierarchy as visible onscreen into the current context.

注意其中的 visible onscreen，也就是將螢幕中可見部分渲染到上下文中，這也解釋了為什麼對 WKWebView 中的 scrollView 展開為實際內容大小，再呼叫 drawViewHierarchyInRect 方法總是得到一張不完整的截圖（只有螢幕可見區域被正確截到，其他區域為空白）。
不過，這樣倒是給我們提供了一個思路，可以將 WKWebView 按螢幕高度裁成 n 頁，然後將 WKWebView 一頁一頁的往上推，每推一頁就呼叫一次 drawViewHierarchyInRect 將當前螢幕的截圖渲染到上下文中，最後呼叫 UIGraphicsGetImageFromCurrentImageContext從上下文中獲取的圖片即為完整截圖。

核心程式碼如下（程式碼為演示用途，完整程式碼請從這裡檢視)：

- (void)snapshotForWKWebView:(WKWebView *)webView
{
    // 1
    UIView *snapshotView = [webView snapshotViewAfterScreenUpdates:YES];
    [webView.superview addSubview:snapshotView];

    // 2
    CGPoint currentOffset = webView.scrollView.contentOffset;
    ...

    // 3
    UIView *containerView = [[UIView alloc] initWithFrame:webView.bounds];
    [webView removeFromSuperview];
    [containerView addSubview:webView];

    
    // 4
    CGSize totalSize = webView.scrollView.contentSize;
    NSInteger page = ceil(totalSize.height / containerView.bounds.size.height);

    webView.scrollView.contentOffset = CGPointZero;
    webView.frame = CGRectMake(0, 0, containerView.bounds.size.width, webView.scrollView.contentSize.height);

    UIGraphicsBeginImageContextWithOptions(totalSize, YES, UIScreen.mainScreen.scale);
    [self drawContentPage:0 maxIndex:page completion:^{
        UIImage *snapshotImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        // 8
        [webView removeFromSuperview];
        ...
    }];
}

- (void)drawContentPage(NSInteger)index maxIndex:(NSInteger)maxIndex completion:(dispatch_block_t)completion
{
    // 5
    CGRect splitFrame = CGRectMake(0, index * CGRectGetHeight(containerView.bounds), containerView.bounds.size.width, containerView.frame.size.height);
    CGRect myFrame = webView.frame;
    myFrame.origin.y = -(index * containerView.frame.size.height);
    webView.frame = myFrame;

    // 6
    [targetView drawViewHierarchyInRect:splitFrame afterScreenUpdates:YES];

    // 7
    if (index < maxIndex) {
        [self drawContentPage:index + 1 maxIndex:maxIndex completion:completion];
    } else {
        completion();
    }
}
複製程式碼

程式碼注意項如下（對應程式碼註釋中的序號）：

  1. 為了截圖時對 frame 進行操作不會出現閃屏等現象，我們需要蓋一個“假”的 webView 到現在的位置上，並將真正的 webView “摘下來”。呼叫 snapshotViewAfterScreenUpdates 即可得到這樣一個“假”的 webView
  2. 儲存真正的 webView 的偏移、位置等資訊，以便截圖完成之後“還原現場”
  3. 用一個新的檢視承載“真正的” webView，這個檢視也是繪圖所用到的上下文
  4. 將 webView 按照實際內容高度和螢幕高度分成 page 頁
  5. 得到每一頁的實際位置，並將 webView 往上推到該位置
  6. 呼叫 drawViewHierarchyInRect 將當前位置的 webView 渲染到上下文中
  7. 如果還未到達最後一頁，則遞迴呼叫 drawViewHierarchyInRect 方法進行渲染；如果已經渲染完了全部頁，則回撥通知截圖完成
  8. 呼叫 UIGraphicsGetImageFromCurrentImageContext 方法從當前上下文中獲取到完整截圖，將第 2 步中儲存的資訊重新賦予到 webView 上，“還原現場”


注意：我們的截圖方法中有對 webView 的 frame 進行操作，如果其他地方如果有對 frame 進行操作的話，是會影響我們截圖的。所以在截圖時應該禁用掉其他地方對 frame 的改變，就像這樣：

- (void)layoutWebView
{
    if (!_isCapturing) {
        self.wkWebView.frame = [self frameForWebView];
    }
}
複製程式碼

結語

當前 WKWebView 的使用越來越廣泛了，我隨意檢視了記憶體佔用：開啟同樣一個網頁，UIWebView 直接佔用了 160 MB 記憶體，而 WKWebView 只佔用了 40 MB 記憶體，差距是相當明顯的。如果我們的業務中用到了 WKWebView 且有截圖需求的話，那麼還是得老老實實完成的。
最後，本文對應的程式碼在這兒：github.com/VernonVan/P…


相關文章