利用 UIGraphicsImageRenderer 將 view 變成圖片(包含只擷取 view 的部分區塊）

開發 iOS App 時，有時我們想要截取畫面裡的某個區塊，將它變成圖片。這樣的功能要如何實現呢 ？

UIGraphicsImageRenderer 可以幫我們實現，關鍵在於利用一個 view 當容器，容納我們想截取的內容。以下我們將介紹兩種功能的實現方法:

1. 將整個 view 變成圖片。
2. 將 view 的部分區塊變成圖片。

將整個 view 變成圖片

設計畫面

利用一個 view 當容器，它容納了 2 個 image view & 1 個 label，之後 UIGraphicsImageRenderer 將幫我們把此 view 的內容變成圖片。

將當容器的 view 連結 outlet

@IBOutlet weak var containerView: UIView!

將 view 變成圖片，然後用 UIActivityViewController 分享

假設畫面上有個分享的 share button，我們定義它的 IBAction function share。

@IBAction func share(_ sender: Any) {
   let renderer = UIGraphicsImageRenderer(size: containerView.bounds.size)
   let image = renderer.image { context in
       containerView.drawHierarchy(in: containerView.bounds, afterScreenUpdates: true)
   }
   let activityViewController = UIActivityViewController(activityItems: [image], applicationActivities: nil)
   present(activityViewController, animated: true)
}

說明

• 利用 UIGraphicsImageRenderer 將 view 變成 UIImage。

let renderer = UIGraphicsImageRenderer(size: containerView.bounds.size)

產生 UIGraphicsImageRenderer，參數 size 描述到時候產生的 UIImage 尺寸。我們想將 containerView 的畫面變成圖片，因此將圖片的尺寸設為 containerView 的 size。(ps: 這裡的尺寸單位為 point，因此若 iPhone 的解析度是 2x，參數 size 是 200 * 300，產生的圖片尺寸將為 400 * 600 pixel。)

let image = renderer.image { context in
    containerView.drawHierarchy(in: containerView.bounds, afterScreenUpdates: true)
}

呼叫 UIGraphicsImageRenderer 的 function image(actions:) 產生圖片，在傳入的 closure 裡從容器 containerView 呼叫 function drawHierarchy(in:afterScreenUpdates:)，將 containerView 的內容繪製成圖片，讓 containerView 和它的 subview 出現在圖片裡。

image(actions:)

drawHierarchy(in:afterScreenUpdates:)

• 利用 UIActivityViewController 分享圖片。

let activityViewController = UIActivityViewController(activityItems: [image], applicationActivities: nil)
present(activityViewController, animated: true)

結果

將 view 的部分區塊變成圖片

設計畫面

待會按下 button 時，我們將擷取全民打棒球圖片裡帥氣的統一獅球員。

連結 image view 的 outlet

class ViewController: UIViewController {
   @IBOutlet weak var imageView: UIImageView!

連結 button 按下觸發的 function，實作截圖的程式

@IBAction func tap(_ sender: Any) {
    let renderer = UIGraphicsImageRenderer(bounds: CGRect(x: 100, y: 30, width: 100, height: 100))
    let image = renderer.image { context in
        containerView.drawHierarchy(in: containerView.bounds, afterScreenUpdates: true)
    }
    let portionImageView = UIImageView(image: image)
    portionImageView.center = view.center
    view.addSubview(portionImageView) 
}

在產生 UIGraphicsImageRenderer 時利用參數 bounds 設定截圖的區塊，在此我們傳入 CGRect(x: 100, y: 30, width: 100, height: 100)，因此它將從 image view (100, 30) 的位置開始截取大小 (100, 100) 的區塊。

結果

按下 button 後，利用截圖的區塊生成 image view ，貼在畫面的中央。