如何将SwiftUI视图渲染为带透明通道的UIImage？

问题出在UIHostingController的默认视图背景是不透明的，导致渲染图片时空白区域被填充为黑色。只需要给宿主视图设置透明背景，并调整渲染逻辑以保留alpha通道即可修复。

修改后的完整代码如下：

func convertViewToData<V>(view: V, size: CGSize) -> UIImage? where V: View {
    guard let rootVC = UIApplication.shared.windows.first?.rootViewController else {
        return nil
    }
    let imageVC = UIHostingController(rootView: view.edgesIgnoringSafeArea(.all))
    imageVC.view.frame = CGRect(origin: .zero, size: size)
    // 关键：设置宿主视图背景为透明
    imageVC.view.backgroundColor = .clear
    rootVC.view.insertSubview(imageVC.view, at: 0)
    let uiImage = imageVC.view.asImage(size: size)
    imageVC.view.removeFromSuperview()
    return uiImage
}

extension UIView {
    func asImage(size: CGSize) -> UIImage {
        let format = UIGraphicsImageRendererFormat()
        format.opaque = false // 确保渲染器支持透明通道
        // 使用指定尺寸渲染，避免视图边界匹配问题
        return UIGraphicsImageRenderer(size: size, format: format).image { context in
            self.drawHierarchy(in: CGRect(origin: .zero, size: size), afterScreenUpdates: true)
        }
    }
}

extension View {
    func convertToImage(size: CGSize) -> UIImage? {
        convertViewToData(view: self, size: size)
    }
}

核心修改说明： #

• 给imageVC.view添加backgroundColor = .clear，消除宿主视图自带的不透明背景
• 将UIView.asImage中的layer.render替换为drawHierarchy，更准确地捕获SwiftUI视图的完整渲染效果（包括透明度信息）
• 渲染时直接使用传入的size参数，确保输出图片尺寸与预期完全一致

测试代码无需改动，运行后右侧生成的图片空白区域会保持透明，和左侧原生视图一样正常叠加在渐变背景上。

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