swift - 如何将 View (不是 UIView)转换为图像？

Question

类似于此线程:How to convert a UIView to an image .
我想转换一个 SwiftUI View而不是 UIView到图像。

Answer 1

尽管 SwiftUI 没有提供将 View 转换为图像的直接方法，但您仍然可以这样做。这是一个小技巧，但它工作得很好。

在下面的示例中，代码会在点击两个 VStack 时捕获它们的图像。它们的内容被转换为 UIImage(如果需要，您可以稍后将其保存到文件中)。在这种情况下，我只是在下面显示它。

请注意，代码可以改进，但它提供了帮助您入门的基础知识。我用 GeometryReader获取要捕获的 VStack 的坐标，但可以使用 Preferences 进行改进使其更加健壮。如果您需要了解更多信息，请查看提供的链接。

此外，为了将屏幕区域转换为图像，我们确实需要一个 UIView。代码使用 UIApplication.shared.windows[0].rootViewController.view以获得顶 View ，但根据您的情况，您可能需要从其他地方获取它。

祝你好运!



这是代码(在 iPhone Xr 模拟器上测试，Xcode 11 beta 4):

import SwiftUI

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

struct ContentView: View {
    @State private var rect1: CGRect = .zero
    @State private var rect2: CGRect = .zero
    @State private var uiimage: UIImage? = nil

    var body: some View {
        VStack {
            HStack {
                VStack {
                    Text("LEFT")
                    Text("VIEW")
                }
                .padding(20)
                .background(Color.green)
                .border(Color.blue, width: 5)
                .background(RectGetter(rect: $rect1))
                .onTapGesture { self.uiimage = UIApplication.shared.windows[0].rootViewController?.view.asImage(rect: self.rect1) }

                VStack {
                    Text("RIGHT")
                    Text("VIEW")
                }
                .padding(40)
                .background(Color.yellow)
                .border(Color.green, width: 5)
                .background(RectGetter(rect: $rect2))
                .onTapGesture { self.uiimage = UIApplication.shared.windows[0].rootViewController?.view.asImage(rect: self.rect2) }

            }

            if uiimage != nil {
                VStack {
                    Text("Captured Image")
                    Image(uiImage: self.uiimage!).padding(20).border(Color.black)
                }.padding(20)
            }

        }

    }
}

struct RectGetter: View {
    @Binding var rect: CGRect

    var body: some View {
        GeometryReader { proxy in
            self.createView(proxy: proxy)
        }
    }

    func createView(proxy: GeometryProxy) -> some View {
        DispatchQueue.main.async {
            self.rect = proxy.frame(in: .global)
        }

        return Rectangle().fill(Color.clear)
    }
}