PencilKit 将背景图像和绘图保存到相册 Xcode

Question

我想将画布保存到相册，但是当我返回相册时，我的子视图不可见。 我只有我的画布和我的画。

我应该改变什么？

  struct Home : View {
        @State var canvas = PKCanvasView()
        @State var showingAlert = false
        var body: some View{
            
            NavigationView{
                MyCanvas(canvasView: canvas)
                    .navigationBarTitleDisplayMode(.inline)
                    .navigationBarItems(
                        leading:
                            HStack{
                                Button(action: { SaveImage()  }, label: { Image(systemName: "square.and.arrow.down.fill").padding() })
                            })
            }
        }
    
        

我的功能是将图像保存到相册：

        func SaveImage(){
            
            // getting image from canvas....
            
            let image = canvas.drawing.image(from: canvas.drawing.bounds, scale: 1)
            
            // saving to albums....
            
            UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
            showingAlert = true
        }
    }
    
    

我的画布，我在其中添加背景图像：

    struct MyCanvas: UIViewRepresentable {
        var canvasView: PKCanvasView
        let picker = PKToolPicker.init()
        
        func makeUIView(context: Context) -> PKCanvasView {
            self.canvasView.tool = PKInkingTool(.pen, color: .black, width: 15)
            self.canvasView.isOpaque = false
            self.canvasView.backgroundColor = UIColor.clear
            self.canvasView.becomeFirstResponder()
    
           let imageView = UIImageView(image: UIImage(named: "badmintoncourt"))
            let subView = self.canvasView.subviews[0]
                subView.addSubview(imageView)
                subView.sendSubviewToBack(imageView)
            return canvasView
        }
        
        func updateUIView(_ uiView: PKCanvasView, context: Context) {
            picker.addObserver(canvasView)
            picker.setVisible(true, forFirstResponder: uiView)
            DispatchQueue.main.async {
                uiView.becomeFirstResponder()
            }
        }
    }

Answer 1

这实际上并没有回答问题，但我像这样保存我的绘图来处理黑暗模式：

let drawing = canvasView.drawing
let frameForImage = canvasView.bounds
let darkImage = thumbnail(drawing: drawing, thumbnailRect: frameForImage, traitCollection: UITraitCollection(userInterfaceStyle: .light))

具有缩略图功能：

func thumbnail(drawing: PKDrawing, thumbnailRect: CGRect, traitCollection: UITraitCollection) -> UIImage {
    var image = UIImage()
    traitCollection.performAsCurrent {
        image = drawing.image(from: thumbnailRect, scale: 1.0)
    }
    return image
}

Answer 2

我知道这是一个老问题，但我也遇到了同样的问题。也许有一天这会对某人有所帮助..

重新渲染 UIView

原答案

很好，简单，但请注意，这将捕获整个视图，包括任何子视图（例如，如果图像上有标尺）

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

使用

UIGraphicsBeginImageContextWithOptions

不太好，但允许更多自定义和选项。

extension PKCanvasView {
    func imageWithBackgroundImage(_ bgImage: UIImage?) -> UIImage? {
        var image: UIImage?
        let rect = self.bounds
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0)
        let imageRect = CGRect(x: 0, y: 0, width: rect.width, height: rect.height)
        if let context = UIGraphicsGetCurrentContext() {
            if let bgImage {
                bgImage.draw(in: imageRect)
            }
            drawing.image(from: drawing.bounds, scale: 0).draw(in: drawing.bounds)

            image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image
        }
        return nil
    }
}