【SwiftUI】Viewを画像として保存する(iOS16)

はじめに

Viewを画像として保存する時の方法を記事にします

前提

画像を保存するためにはユーザーからの許可が必要です。
リクエストを表示させるために、以下のキーをInfo.plistにセットします

Privacy - Photo Library Usage Description

実装

import SwiftUI

struct ContentView: View {
    @Environment(\.displayScale) private var displayScale
    
    var body: some View {
        VStack(spacing: 50) {
            sampleView()
            
            Button {
                if let image = render() {
                    UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
                }
            } label: {
                Text("保存")
            }
        }
    }
    
    private func sampleView() -> some View {
        Text("テスト")
            .font(.largeTitle)
            .foregroundColor(.white)
            .frame(width: 400, height: 250)
            .background(Color.green, in: RoundedRectangle(cornerRadius: 10))
    }
    
    @MainActor
    func render() -> UIImage? {
        let renderer = ImageRenderer(content: sampleView())

        renderer.scale = displayScale

        return renderer.uiImage
    }
}

解説

ここが保存したいViewです。
メソッドとして定義しています。

private func sampleView() -> some View {
    Text("テスト")
        .font(.largeTitle)
        .foregroundColor(.white)
        .frame(width: 400, height: 250)
        .background(Color.green, in: RoundedRectangle(cornerRadius: 10))
}

ここでsampleView()をUIImageに変換しています。

@MainActor
func render() -> UIImage? {
    let renderer = ImageRenderer(content: sampleView())

    renderer.scale = displayScale

    return renderer.uiImage
}

ここでUIImageを端末に保存しています。

if let image = render() {
    UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
}

ドキュメント

おわり

iOS16からImageRendererが使用できるようになったので簡単にViewを保存することができるようになりました。

透過させた画像を保存したい場合は↓こちら！！