3

I can convert any SwiftUI View to a high resolution UIImage, using the code below. It works great... until... I try to use an image size larger than CGSize(width: 2730, height: 2730).

If I increase the image size to CGSize(width: 2731, height: 2731) or larger, the line:

self.drawHierarchy(in: self.layer.bounds, afterScreenUpdates: true)

in "extension UIView", can no longer draw the UIImage.

Any idea on why there is a size limitation?

One Note: I can overcome the size limitation by uncommenting the 2 lines in the "extension View" and replacing:

self.drawHierarchy(in: self.layer.bounds, afterScreenUpdates: true)

With:

layer.render(in: context.cgContext)

in the "extension UIView"... But THEN "layer.render" will not render image effects such as "blur", SceneKit subviews, or metal. So using "self.drawHierarchy" is a must.

// 1: Set breakpoint on line: print("done") to inspect the high res image
// 2: Run, then tap the image on screen to inspect the highresImage
// 3: repeat after changing the size to CGSize = CGSize(width: 2731, height: 2731)

import SwiftUI

struct ContentView: View {
    @State var blurRadius: CGFloat = 4.0
    let imageSize: CGSize = CGSize(width: 2730, height: 2730)

    var body: some View {
        testView
            .frame(width: 300, height: 300)
            .onTapGesture {
                // Adjust blur radius based on high res image scale
                blurRadius *= imageSize.width * 0.5/300

                // Capture high res image of swiftUI view
                let highresImage = testView.asImage(size: imageSize)
                // set breakpoint here to inspect the high res image size, quality, etc.
                print("done")
                
                // reset blur radius back to 4
                blurRadius = 4
            }
    }

    var testView: some View {
        ZStack {
            Color.blue
            Circle()
                .fill(Color.red)
        }
        .blur(radius: blurRadius)
    }
}

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

        }
    }
}


extension View {
    func asImage(size: CGSize) -> UIImage {
        let controller = UIHostingController(rootView: self)
        controller.view.bounds = CGRect(origin: .zero, size: size)
        //UIApplication.shared.windows.first!.rootViewController?.view.addSubview(controller.view)
        let image = controller.view.asImage()
        //controller.view.removeFromSuperview()
        return image
    }
}

1
  • On the iPad Pro (which seems to be 2x), the limit is 4096. Likewise, you can still render an 8192x8192 image on 3x iPhones if you use 8192.0 / UIScreen.main.nativeScale Apple probably hardcoded an 8192x8192 pixel limit for rendering views. Commented Oct 15, 2021 at 4:06

1 Answer 1

0

I can't figure out why, but it works for me, after changing the y-coordinate of the view's origin to anything non zero. This may be a bug in UIHostingController.

If you use a very small Int, you can't see the difference, e.g.:

controller.view.bounds = CGRect(origin: CGPoint(x: 0, y: 0.0001), size: size)
2
  • 1
    I just tried your suggestion, but no go... Still fails to draw. I'm using Xcode 12.2, running on iOS 14.2 iPhone 12 Pro Simulator. Commented Dec 8, 2020 at 23:23
  • I have some follow-up on this. Looks like I didn't test my solution properly. I actually could get it to work on 1x and 2x devices, but for some reason it fails on 3x devices. I still couldn't find a solution and now switched my view to UIKit. Commented Mar 14, 2021 at 15:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.