3
2

More than 1 year has passed since last update.

お題は不問!Qiita Engineer Festa 2023で記事投稿!

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

Posted at

はじめに

昨日、【SwiftUI】Viewを画像として保存する(iOS16)という記事を書きました。
今回は昨日の応用版の記事です

Viewがない場所は透過させます。

前提

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

Privacy - Photo Library Usage Description

スクリーンショット 2023-06-30 20.44.12.png

実装

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)
}

おわり

いい感じですねー

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2