Snapshot of a SwiftUI View

I'm struggling with this too. I've almost managed to get it working but the rendered image is incorrect.

The NavigationView items bleed over into the below view (i.e. they are correct in the app but the rendered image has the navigation title and barbutton items shifted down and overapping the view just below the navigation view.

In addition if I try to capture the whole screen and extract the specific subview, the reported view size is incorrect - i.e. the attached GeomertyReader provides the size of the view however when that size is used, the extracted image also includes a region around the view.

I battled this for a while. I have a specific view that I needed to capture which was sometimes larger than the screen.

My workaround in the end was to put the view I wanted to capture in a UIHostingController which I then put in the main view of a UIScrollView (this gives me flexibility on size)

then

func image(with view: UIView) -> UIImage? {

UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.isOpaque, 0.0)

defer { UIGraphicsEndImageContext() }

if let context = UIGraphicsGetCurrentContext() {

view.layer.render(in: context)

if let image = UIGraphicsGetImageFromCurrentImageContext() {

return image

}

return nil

}

return nil

}

Can you share how you have managed to capture a SwiftUI view? I have tried some solutions but none of them worked.

Could you share your code?

How to take a screenshot of List in a ScrollView of SwiftUI?

I'd recommend combining these two approaches, worked like magic for me.

type the following in youtube search(Apple doesn't let me post the youtube link here):
"Hack screen capture to take photo of web info easily on your app | SwiftUI"
Use the background modifier shown in the video, it's a great idea.

Use the View and UIView extensions from this source:
https://gist.github.com/SatoTakeshiX/39e111aa93f896e58c74fdc13d19ba0a

Have you solved this? I'm trying to get it work with WebView which is causing a little bit problems because I think it should wait the view to load before taking the picture. Right now it's just white. Please let me know if you have solution.

Code Block 
//  Convert any SwiftUI View to UIImage
import SwiftUI
struct ContentView: View {
    let imageSize: CGSize = CGSize(width: 1000, height: 1000)
    var body: some View {
        testView
            .frame(width: 300, height: 300)
            .onTapGesture {
                // Capture high res image of swiftUI view
                let highresImage = testView.asImage(size: imageSize)
                // Now you can do what ever with the highresImage
            }
    }
    var testView: some View {
        ZStack {
            Color.blue
            Circle()
                .fill(Color.red)
        }
    }
}
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)
        }
    }
}
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()
        return image
    }
}

Simple. Add an extension to view.

Code Block Swift
extension View {
    func snapshot() -> UIImage {
        let controller = UIHostingController(rootView: self)
        let view = controller.view
        let targetSize = controller.view.intrinsicContentSize
        view?.bounds = CGRect(origin: .zero, size: targetSize)
        view?.backgroundColor = .clear
        let renderer = UIGraphicsImageRenderer(size: targetSize)
        return renderer.image { _ in
            view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
        }
    }
}

Then use body.snapshot() (assuming you use var body: Some View for your View) to take a UIImage snapshot of the View.

Code Block  Swift
struct ContentView: View {
    var textView: some View {
        Text("Hello, SwiftUI")
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .clipShape(Capsule())
    }
    var body: some View {
        VStack {
            textView
            Button("Save to image") {
                let image = textView.snapshot()
                UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
            }
        }
    }
}

Code Block extension View {
  func snapshot() -> UIImage {
    let controller = UIHostingController(rootView: self)
    let view = controller.view
    let targetSize = controller.view.intrinsicContentSize
    view?.bounds = CGRect(origin: .zero, size: targetSize)
    view?.backgroundColor = .systemBackground
    let renderer = UIGraphicsImageRenderer(size: targetSize)
    return renderer.image { _ in
      view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
    }
  }
}

I think it can help I use this in swiftui it can be used in swift too

edit: I read all replies after posting