playgroundRender.swift

import PlaygroundSupport
import SwiftUI
extension UIView {
  var renderedImage: UIImage {
    let image = UIGraphicsImageRenderer(size: self.bounds.size).image { context in
      UIColor.lightGray.set(); UIRectFill(bounds)
      context.cgContext.setAlpha(0.75)
      self.layer.render(in: context.cgContext)
    }
    return image
  }
}
extension View {
  var renderedImage: UIImage {
    let window = UIWindow(frame: CGRect(origin: .zero, size: CGSize(width: 320, height: 160)))
    let hosting = UIHostingController(rootView: self)
    hosting.view.frame = window.frame
    window.rootViewController = hosting
    window.makeKey()
    return hosting.view.renderedImage
  }
}

Text("Hello").renderedImage

Slider(value: .constant(0.5)).renderedImage
let img = ([Color.red, .orange, .yellow, .green, .blue, .purple]
  .reduce(AnyView(Text("👭").font(.largeTitle)
    .rotationEffect(Angle(radians: .pi)))) {
      AnyView($0.padding()
        .background($1)
        .rotationEffect(Angle(radians: .pi / 6)))
}).renderedImage
img

I have a “report card” on screen which is a SwiftUI view. I want to use the export button to convert it to a UIImage then save to camera roll and / or send out the jpeg via email. Does SwiftUI view has a layer property or similar thing that I can work with CGContext?

I'm using XCode 11.3 on Mojave. None of these work. Could you please update the code? Thank you.

Leaving myself a note:

import PlaygroundSupport
import SwiftUI
extension UIView {
    var renderedImage: UIImage {
      let image = UIGraphicsImageRenderer(size: bounds.size).image { context in
        layer.render(in: context.cgContext)
      }
      return image
    }

    var renderedPlaygroundImage: UIImage {
    let image = UIGraphicsImageRenderer(size: bounds.size).image { context in
      UIColor.lightGray.set(); UIRectFill(bounds)
      context.cgContext.setAlpha(0.75)
      self.layer.render(in: context.cgContext)
    }
    return image
  }
}
extension View {
  var renderedImage: UIImage {
    let window = UIWindow(frame: CGRect(origin: .zero, size: CGSize(width: 320, height: 160)))
    let hosting = UIHostingController(rootView: self)
    hosting.view.frame = window.frame
    window.rootViewController = hosting
    window.makeKey()
    return hosting.view.renderedImage
  }
}

Text("Hello").renderedImage

Slider(value: .constant(0.5)).renderedImage
let img = ([Color.red, .orange, .yellow, .green, .blue, .purple]
  .reduce(AnyView(Text("👭").font(.largeTitle)
    .rotationEffect(Angle(radians: .pi)))) {
      AnyView($0.padding()
        .background($1)
        .rotationEffect(Angle(radians: .pi / 6)))
}).renderedImage
img

If you add any effects to the views, such as .blur(radius: 10), layer.render(in: context.cgContext) will not render it to the image.

If you replace this:
layer.render(in: context.cgContext)
with this:
self.drawHierarchy(in: self.layer.bounds, afterScreenUpdates: true)

then all effects are included in the image... BUT then a new issue comes up. If you are dealing with high res images, for some reason the maximum size that can be drawn by self.drawHierarchy(in: self.layer.bounds, afterScreenUpdates: true) is CGSize(width: 2730, height: 2730). if you increase the image size to 2731 or higher, the image will not be drawn.

1: Since layer.render(in: context.cgContext) has no size limitation, would like to know if there is another way to use it with .blur and other effects.
2: or how to over come the size limitation of self.drawHierarchy(in: self.layer.bounds, afterScreenUpdates: true)

I have posted my code at: https://stackoverflow.com/questions/65163097/convert-swiftui-view-to-uiimage