How do I render a SwiftUI View that is not at the root hierarchy as a UIImage?

Question

Suppose I have a simple SwiftUI View that is not the ContentView such as this:

struct Test: View {        
    var body: some View {
        VStack {
            Text("Test 1")
            Text("Test 2")
        }
    }
}

How can I render this view as a UIImage?

I've looked into solutions such as :

extension UIView {
    func asImage() -> UIImage {
        let renderer = UIGraphicsImageRenderer(bounds: bounds)
        return renderer.image { rendererContext in
            layer.render(in: rendererContext.cgContext)
        }
    }
}

But it seems that solutions like that only work on UIView, not a SwiftUI View.

ericasadun.com/2019/06/20/…

Josh Homann
– Josh Homann

2019-12-14 06:56:33 +00:00
Commented Dec 14, 2019 at 6:56 — Josh Homann
– Josh Homann, Commented Dec 14, 2019 at 6:56

Martijn Pieters · Accepted Answer · 2022-08-23 13:48:13Z

21

Here is the approach that works for me, as I needed to get image exactly sized as it is when placed alongside others. Hope it would be helpful for some else.

Demo: above divider is SwiftUI rendered, below is image (in border to show size)

Update: re-tested with Xcode 13.4 / iOS 15.5

Test module in project is here

enter image description here

extension View {
    func asImage() -> UIImage {
        let controller = UIHostingController(rootView: self)

        // locate far out of screen
        controller.view.frame = CGRect(x: 0, y: CGFloat(Int.max), width: 1, height: 1)

        let size = controller.sizeThatFits(in: UIScreen.main.bounds.size)
        controller.view.bounds = CGRect(origin: .zero, size: size)
        controller.view.sizeToFit()
        UIApplication.shared.windows.first?.rootViewController?.view.addSubview(controller.view)

        let image = controller.view.asImage()
        controller.view.removeFromSuperview()
        return image
    }
}

extension UIView {
    func asImage() -> UIImage {
        let renderer = UIGraphicsImageRenderer(bounds: bounds)
        return renderer.image { rendererContext in
// [!!] Uncomment to clip resulting image
//             rendererContext.cgContext.addPath(
//                UIBezierPath(roundedRect: bounds, cornerRadius: 20).cgPath)
//            rendererContext.cgContext.clip()

// As commented by @MaxIsom below in some cases might be needed
// to make this asynchronously, so uncomment below DispatchQueue
// if you'd same met crash
//            DispatchQueue.main.async {
                 layer.render(in: rendererContext.cgContext)
//            }
        }
    }
}


// TESTING
struct TestableView: View {
    var body: some View {
        VStack {
            Text("Test 1")
            Text("Test 2")
        }
    }
}

struct TestBackgroundRendering: View {
    var body: some View {
        VStack {
            TestableView()
            Divider()
            Image(uiImage: render())
                .border(Color.black)
        }
    }
    
    private func render() -> UIImage {
        TestableView().asImage()
    }
}

edited Aug 23, 2022 at 13:48

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Dec 14, 2019 at 8:05

Asperi

262k28 gold badges594 silver badges889 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

user12533955 Over a year ago

It works! Now if I needed specifically to use a UIImage type inside my view instead of Image would that be possible? Since in the code here we have Image(uiImage: render()), is there an equivalent UIImage expression with the render? And can we even use UIImage in a SwiftUI View?

AnaghSharma Over a year ago

@Asperi Apparently it does not work if TestableView contains dynamic data which is passed down to it using @Binding. Getting Thread 1: EXC_BAD_INSTRUCTION (code=EXC_I386_INVOP, subcode=0x0) in layer.render line of UIView extension.

Thiago Over a year ago

I'm having the same issue with dynamic data. @AnaghSharma did you find a way to solve it?

Max Isom Over a year ago

I was able to prevent it from crashing by wrapping self.layer.render(in: rendererContext.cgContext) with DispatchQueue.main.async {}

zdravko zdravkin Over a year ago

I get empty image with DispatchQueue.main.async { [weak self] in layer.render }, but correct image without

|

Saurabh Prajapati · Accepted Answer · 2020-11-26 07:55:50Z

3

Solution of Asperi works, but if you need image without white background you have to add this line:

controller.view.backgroundColor = .clear

And your View extension will be:

extension View {
    func asImage() -> UIImage {
        let controller = UIHostingController(rootView: self)
        
        // locate far out of screen
        controller.view.frame = CGRect(x: 0, y: CGFloat(Int.max), width: 1, height: 1)
        UIApplication.shared.windows.first!.rootViewController?.view.addSubview(controller.view)
        
        let size = controller.sizeThatFits(in: UIScreen.main.bounds.size)
        controller.view.bounds = CGRect(origin: .zero, size: size)
        controller.view.sizeToFit()
        controller.view.backgroundColor = .clear
        let image = controller.view.asImage()
        controller.view.removeFromSuperview()
        return image
    }
}

edited Nov 26, 2020 at 7:55

Saurabh Prajapati

2,3811 gold badge26 silver badges43 bronze badges

answered May 28, 2020 at 8:31

Denis Markov

1571 silver badge4 bronze badges

2 Comments

zdravko zdravkin Over a year ago

If you add modifier as .backgroundColor() to TestableView() will present that color.

Arslan Kaleem Over a year ago

this solution is not working as I am trying to convert swiftUI in storyboard ViewController. It is showing simply white box nothing else

Collectives™ on Stack Overflow

How do I render a SwiftUI View that is not at the root hierarchy as a UIImage?

2 Answers 2

Update: re-tested with Xcode 13.4 / iOS 15.5

16 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update: re-tested with Xcode 13.4 / iOS 15.5

16 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related