Image Gernerating

이미지 저장 기능

구현 순서

1. Target으로하는 View를 구현한다.

   1. 해당 뷰를 그대로 이미지로 만들기 때문에 따로 View를 만들거나 아래와 같이 바뀌는 내용이 없다면 extension에 computed property로 구현해도 된다.

   // 렌더해야 하는 뷰
   extension RendererTestView {
       private var TargetImageView: some View {
           ZStack{
               Color.white
               VStack {
                   Text("HELLO\nWORLD")
                       .font(.title)
                       .multilineTextAlignment(.center)
               }
               .padding(40)
               .background(.purple)
               .foregroundColor(.white)
               .shadow(color: .purple, radius: 10)
           }
       }
   }

2. TargetImageView의 사이즈를 GeometryReader를 통해 저장한다.

   GeometryReader { geo in
       TargetImageView
           .onAppear {
               self.geoSize = CGSize(width: geo.size.width, height: geo.size.height)
           }
   }

3. 렌더 버튼을 클릭할 경우 아래와 같이 asImage를 통해 이미지를 렌더한다.

   Button {
       renderImage = TargetImageView.asImage(size: self.geoSize)
   } label: {
       Text("generate image")
   }

4. View에 대한 extension에 아래와 같이 UIHostingController를 통해 해당 View를 UIView로 사용가능하게 한다.

   extension View {
       func asImage(size: CGSize) -> UIImage {
           let controller = UIHostingController(rootView: self)
           controller.view.bounds = CGRect(origin: .zero, size: size)
           let image = controller.view.asImage(size: size)
           return image
       }
   }

5. UIView에 대해서 역시 Extension을 통해 asImage를 구현한다. UIGraphicsImageRender를 통해 해당 뷰의 크기만큼 이미지를 렌더해서 return해준다.

   extension UIView {
       func asImage(size: CGSize) -> UIImage {
           let format = UIGraphicsImageRendererFormat()
           format.scale = 1
           return UIGraphicsImageRenderer(size: size, format: format).image { context in
               self.drawHierarchy(in: self.layer.bounds, afterScreenUpdates: true)
           }
       }
   }

6. 받은 이미지를 보여주거나 처리한다.

   struct RendererTestView: View {
       @State var geoSize: CGSize = .init(width: 0, height: 0)
       @State var renderImage: UIImage?
       
       var body: some View {
           VStack {
               GeometryReader { geo in
                   TargetImageView
                       .onAppear {
                           self.geoSize = CGSize(width: geo.size.width, height: geo.size.height)
                       }
               }
   						// Image를 받은 경우 unWrapping해서 보여준다. 
               if let uiImage = renderImage {
                   Image(uiImage: uiImage)
               } else {
                   Spacer()
                       .frame(height: 200)
               }
               
               Button {
                   renderImage = TargetImageView.asImage(size: self.geoSize)
               } label: {
                   Text("generate image")
               }
           }
           .padding()
       }
   }

UIGraphicsImageRenderer

Core Graphic에서 지원지원하는 렌더러로 UIGraphicsImageRenderer를 통해 UIImage를 렌더할 수 있다.

• [UIGraphicsImageRendererFormat](https://developer.apple.com/documentation/uikit/uigraphicsimagerendererformat) : 렌더하는 image의 scale 등을 설정할 수 있다.
• [drawHierarchy(in:afterScreenUpdates:)](https://developer.apple.com/documentation/uikit/uiview/1622589-drawhierarchy) : 현재 화면에서 그려진 화면을 render합니다.

UIHostingController

UIHostingController는 SwiftUI뷰를 UIKit에서 사용할 수 있게 도와준다. 제네릭으로 가지는 Content에 SwiftUI뷰를 넣어서 선언하면 해당 뷰는 UIKit에서 사용가능한 뷰로 활용 가능하게 된다. 여기서는 해당 뷰에 대해 UIGraphicsImageRenderer라는 UIKit 기능을 사용해야 해서 UIHostingController를 사용하게 되었다.

open class UIHostingController<Content> : UIViewController where Content : View

전체 코드

//
//  RendererTestView.swift
//  test
//
//  Created by Seungui Moon on 10/9/23.
//

import SwiftUI

struct RendererTestView: View {
    @State var geoSize: CGSize = .init(width: 0, height: 0)
    @State var highresImage: UIImage = UIImage()
    @State var renderImage: UIImage?
    
    var body: some View {
        VStack {
            GeometryReader { geo in
                TargetImageView(cgSize: geo.size)
                    .onAppear {
                        self.geoSize = CGSize(width: geo.size.width, height: geo.size.height)
                    }
            }
            if let uiImage = renderImage {
                Image(uiImage: uiImage)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 200,height: 200)
            }
            
            Button {
                renderImage = TargetImageView(cgSize: self.geoSize).asImage(size: self.geoSize)
                
            } label: {
                Text("generate image")
                    .frame(height: 200)
            }
        }
        .padding()
    }
}

#Preview {
    RendererTestView()
}

extension UIView {
    func asImage(size: CGSize) -> UIImage {
        let format = UIGraphicsImageRendererFormat()
        format.scale = 1
        return UIGraphicsImageRenderer(size: size, format: format).image { context in
            self.drawHierarchy(in: self.layer.bounds, afterScreenUpdates: true)
        }
    }
}

extension View {
    func asImage(size: CGSize) -> UIImage {
        let controller = UIHostingController(rootView: self)
        controller.view.bounds = CGRect(origin: .zero, size: size)
        let image = controller.view.asImage(size: size)
        return image
    }
}

struct TargetImageView: View {
    @State var cgSize: CGSize
    
    var body: some View {
        ZStack{
            Color.white
            VStack {
                Text("HELLO\nWORLD")
                    .font(.title)
                    .multilineTextAlignment(.center)
            }
            .padding(40)
            .background(.purple)
            .foregroundColor(.white)
            .shadow(color: .purple, radius: 10)
        }
    }
}