Swift UI 导出画布内容

我有一个画布，用户可以在上面画东西。我想导出用户在画布上绘制的任何内容，并且我正在使用以下扩展从视图中获取图像

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)
        }
    }
}

但不幸的是，这个扩展适用于任何简单视图上的按钮。每当我将它用于画布时，它都会给我一个空白图像，看起来它没有获取画布的内容。

是否可以导出我的画布内容？

是因为我用笔画画画布吗？

这就是我使用画布的方式：

    @State private var currentLine = Line(color: .red)
    @State private var drawedLines = [Line]()
    @State private var selectedColor: Color = .red
    @State private var selectedSize = 1.0
    private var colors:[Color] = [.red, .green, .blue, .black, .orange, .yellow, .brown, .pink, .purple, .indigo, .cyan, .mint]

    var canvasPallete: some View {
        return Canvas { context, size in
            for line in drawedLines {
                var path = Path()
                path.addLines(line.points)
                context.stroke(path, with: .color(line.color), lineWidth: line.size)
            }

        }.gesture(DragGesture(minimumDistance: 0, coordinateSpace: .local)
            .onChanged({ value in
                let point = value.location
                currentLine.points.append(point)
                currentLine.color = selectedColor
                currentLine.size = selectedSize
                drawedLines.append(currentLine)
            })
            .onEnded({ value in
                currentLine = Line(color: selectedColor)
             })
        )
    }

    var body: some View {
        VStack {
            canvasPallete
                .frame(width: 300, height: 300)
            Divider()
            HStack(alignment: .bottom ) {
                VStack{
                    Button {
                        print("Will save draw image")
                        let image = canvasPallete.snapshot()
                        
                        UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
                    } label: {
                        Text("Save")
                    }
                    .padding([.bottom], 25)

                    Button {
                        drawedLines.removeAll()
                    } label: {
                        Image(systemName: "trash.circle.fill")
                            .font(.system(size: 40))
                            .foregroundColor(.red)
                    }.frame(width: 70, height: 50, alignment: .center)
                }
                VStack(alignment: .leading) {
                    Text("Colors:")
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: 4) {
                            ForEach(colors, id:\.self){color in
                                ColoredCircleButton(color: color, selected: color == selectedColor) {
                                    selectedColor = color
                                }
                            }

                        }
                        .padding(.all, 5)

                    }
                    Text("Size:")
                    Slider(value: $selectedSize, in: 0.2...8)
                        .padding([.leading,.trailing], 20)
                        .tint(selectedColor)
                }
                .padding([.bottom], 10)

            }


        }.frame(minWidth: 400, minHeight: 400)
    }
}


    struct ColoredCircleButton: View {
        let color: Color
        var selected = false
        let onTap: (() -> Void)
    
        var body: some View {
            Circle()
                .frame(width: 25, height: 25)
                .foregroundColor(color)
                .overlay(content: {
                    if selected {
                        Circle().stroke(.gray, lineWidth: 3)
                    }
                })
                .onTapGesture {
                    onTap()
                }
        }
    }

这很好用！

您遇到的问题是在您的示例代码中，canvasPallete没有获得框架修改器snapshot()被要求这样做。所以它的渲染尺寸不是你想要的，可能是 (0,0)。

如果您更改快照行，它将起作用：

let image = canvasPallete
    .frame(width: 300, height: 300)
    .snapshot()

还有一件事！在 iOS 16 中，有新的 API 用于将视图渲染为图像。因此，对于 iOS 16 及更高版本，您可以跳过 View 扩展并编写：

let renderer = ImageRenderer(content: canvasPallete)
if let image = renderer.uiImage {
    UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
}