SwiftUI中snapshot()无法捕获WebImage下载图片的问题求助

我尝试对包含SDWebImageSwiftUI库中WebImage下载图片的SwiftUI视图截图，但调用snapshot函数时，生成的图片只显示占位符（比如ProgressView），不显示实际下载的图片。AsyncImage也存在同样问题。

WebImage实现代码 #

WebImage(url: URL(string: url)) { image in
    image.resizable()
} placeholder: {
    ProgressView()
}
.aspectRatio(contentMode: .fit)

Snapshot函数代码 #

func snapshot<T: View>(of view: T) -> UIImage {
        let controller = UIHostingController(rootView: view)
        let hostingView = controller.view
        
        let targetSize = hostingView?.intrinsicContentSize ?? .zero
        hostingView?.bounds = CGRect(origin: .zero, size: targetSize)
        hostingView?.backgroundColor = .clear
        
        let renderer = UIGraphicsImageRenderer(size: targetSize)
        
        return renderer.image { _ in
            hostingView?.drawHierarchy(in: hostingView!.bounds, afterScreenUpdates: true)
        }
    }

观察结果 #

• 该snapshot函数对其他SwiftUI组件截图完全正常。
• 即便等待足够长时间确保图片已下载，截图中仍显示占位符而非实际图片。

疑问 #

1. 为何下载的图片未被包含在截图中？
2. 如何确保WebImage内容完全加载并被包含在截图中？
3. 是否有更好的方法捕获使用WebImage的SwiftUI视图的截图？

1. 问题原因 #

WebImage和AsyncImage都是异步加载图片的组件，视图更新依赖于图片加载完成后的状态变更。而你的snapshot函数是同步执行的：创建UIHostingController后立即计算尺寸并渲染截图，此时异步加载的图片还没完成渲染——甚至因为UIHostingController的视图未加入视图层级，SwiftUI的异步任务可能都没启动，导致占位符被捕获，实际图片还没来得及替换占位符。

另外，drawHierarchy(afterScreenUpdates: true)仅触发一次屏幕更新，不足以等待异步图片加载完成并渲染。

2. 确保图片加载完成再截图的方法 #

核心思路是等待图片加载完成后再触发截图，以下两种方式均可实现：

方式一：利用SDWebImage的加载回调

SDWebImageSwiftUI的WebImage提供了加载状态回调，可在图片加载成功后执行截图：

WebImage(url: URL(string: url)) { image in
    image.resizable()
} placeholder: {
    ProgressView()
}
.onSuccess { _, _, _ in
    // 图片加载成功后，异步执行截图（避免阻塞主线程）
    DispatchQueue.main.async {
        let snapshotImage = snapshot(of: self.body)
        // 处理截图结果
    }
}
.aspectRatio(contentMode: .fit)

方式二：优化截图函数，等待视图完全渲染

将snapshot改为异步版本，把UIHostingController的视图加入窗口层级，确保异步任务正常执行，再等待渲染完成后截图：

func snapshot<T: View>(of view: T, completion: @escaping (UIImage?) -> Void) {
    let controller = UIHostingController(rootView: view)
    guard let window = UIApplication.shared.windows.first else {
        completion(nil)
        return
    }
    window.addSubview(controller.view)
    
    // 等待视图布局完成
    controller.view.layoutIfNeeded()
    
    // 延迟等待异步内容渲染完成
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        let targetSize = controller.view.intrinsicContentSize
        controller.view.bounds = CGRect(origin: .zero, size: targetSize)
        
        let renderer = UIGraphicsImageRenderer(size: targetSize)
        let image = renderer.image { _ in
            controller.view.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
        }
        
        controller.view.removeFromSuperview()
        completion(image)
    }
}

调用示例：

snapshot(of: yourWebImageView) { image in
    // 处理截图结果
}

3. 更可靠的截图方案 #

方案一：直接下载图片后构建视图截图

绕过异步视图的渲染问题，用SDWebImage直接下载图片，再构建静态视图截图：

SDWebImageManager.shared.loadImage(with: URL(string: url), options: [], progress: nil) { image, _, _, _, _, _ in
    guard let uiImage = image else { return }
    let staticImageView = Image(uiImage: uiImage)
        .resizable()
        .aspectRatio(contentMode: .fit)
    let snapshotImage = snapshot(of: staticImageView)
    // 处理截图结果
}

方案二：iOS 16+ 使用SwiftUI原生ImageRenderer

iOS 16及以上版本，可直接用SwiftUI的ImageRenderer渲染视图，前提是确保图片已加载完成：

let renderer = ImageRenderer(content: yourWebImageView)
renderer.scale = UIScreen.main.scale
if let image = renderer.uiImage {
    // 处理截图结果
}

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