SwiftUI中如何将Canvas内容导出为图片？

我刚好遇到过这个问题！你用的drawHierarchy截图方法对Text、Button这类常规SwiftUI视图很有效，但Canvas的渲染逻辑和普通View完全不同——它是基于Metal的异步渲染机制，直接调用drawHierarchy时，Canvas的绘制任务可能还在后台执行，还没来得及把内容画出来，所以会得到空白图。

下面给你两种针对性的解决方案，根据你的iOS版本需求选择：

方案一：iOS 16+ 推荐使用ImageRenderer #

苹果在iOS 16之后专门提供了ImageRenderer，完美适配所有SwiftUI视图（包括Canvas），代码更简洁且渲染更可靠：

import SwiftUI

@available(iOS 16.0, *)
extension View {
    func snapshot() -> UIImage {
        let renderer = ImageRenderer(content: self)
        renderer.scale = UIScreen.main.scale // 保证导出图片的清晰度
        return renderer.uiImage ?? UIImage()
    }
}

替换你原来的snapshot方法后，直接调用canvas.snapshot()就能得到正常的Canvas截图，不需要额外的类型判断逻辑。

方案二：兼容iOS 15及以下的异步等待方案 #

如果需要支持更低版本，我们需要给Canvas预留足够的渲染时间，通过异步等待确保绘制完成后再截图：

extension View {
    func snapshot(completion: @escaping (UIImage?) -> Void) {
        let controller = UIHostingController(rootView: self)
        let view = controller.view
        let targetSize = controller.view.intrinsicContentSize
        view?.bounds = CGRect(origin: .zero, size: targetSize)
        view?.backgroundColor = .clear
        
        // 强制视图完成布局
        view?.layoutIfNeeded()
        // 给Canvas预留一点异步渲染的时间
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
            let renderer = UIGraphicsImageRenderer(size: targetSize)
            let image = renderer.image { _ in
                view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
            }
            completion(image)
        }
    }
}

修改你的Button点击逻辑，改用异步回调的方式保存图片：

Button("Save to image: Canvas") {
    canvas.snapshot { image in
        guard let image = image else { return }
        UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
    }
}

额外提示 #

你原来代码里的if let view = canvas as? Canvas<EmptyView>其实是多余的——canvas本身就是View类型，直接调用snapshot()方法即可，不需要做类型强转判断。

内容的提问来源于stack exchange，提问作者PujolDeveloper