[SwiftUI] ImageRender Image 화질 문제 for scale

iOS 16 버전부터 SwiftUI 전용 ImageRenderer 를 통해 뷰를 이미지로 캡쳐 할 수 있다.
일반적인 사용법은 아래와 같다.

ImageRenderer

struct ContentView: View {
  @Environment(\.displayScale)
  var displayScale: CGFloat
  
  @State 
  var renderedImage = Image(systemName: "photo")
  
  var body: some View {
    Text("Hello ImageRender")
      .onAppear {
        let renderer = ImageRenderer(content: Text("Hello ImageRender"))

        // make sure and use the correct display scale for this device
        renderer.scale = displayScale
        
        if let uiImage = renderer.uiImage {
          renderedImage = Image(uiImage: uiImage)
        }
      }
  }
}

displayScale

• @Environment(.displayScale) Display의 scale을 넘겨준다.

sacle

• ImageRenderer는 sacle을 세팅해도 이미지가 매우 저화질로 생성된다.

AsyncImageRenderer

이 문제를 해결하려면 AsyncImageRenderer를 사용해 해결할 수 있다.
aysnc/await를 사용해 해결하였다.

AsyncImageRenderer	ImageRenderer
Fixed	Original

import AsyncImageRenderer

struct ContentView: View {
  @State 
  var renderedImage = Image(systemName: "photo")
  
  var body: some View {
    Text("Hello ImageRender")
      .onAppear {
        Task {
          if let image = await AsyncImageRenderer.image(Text("Hello ImageRender")) {
            self.renderedImage = image
          }
        }
      }
  }
}

---

추후 ImageRender는 애플에서 더 좋게 개선해 줄 것이니 믿고 기다려 보자.