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

はじめに

昨日、【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(), let data = image.pngData(), let png = UIImage(data: data) {
                    UIImageWriteToSavedPhotosAlbum(png, 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をpngに変換してから端末に保存しています

if let image = render(), let data = image.pngData(), let png = UIImage(data: data) {
    UIImageWriteToSavedPhotosAlbum(png, nil, nil, nil)
}

おわり

いい感じですねー