如何创建SwiftUI View扩展以将其转换为NSImage macOS端实现

macOS 没有提供 iOS 上 UIGraphicsImageRenderer 对应的直接等效 API，你可以通过 NSHostingView 包装 SwiftUI 视图后渲染到图形上下文的方式实现需求。

基础版本实现 #

import SwiftUI
import AppKit

extension View {
    /// 生成当前 SwiftUI 视图对应的 NSImage
    /// - Parameter size: 指定生成图片的尺寸，不传则自动使用视图自适应内容的理想尺寸
    /// - Returns: 渲染完成的 NSImage
    func snapshot(size: CGSize? = nil) -> NSImage {
        let targetSize = size ?? sizeThatFits(
            .init(width: .greatestFiniteMagnitude, height: .greatestFiniteMagnitude)
        )
        // 将 SwiftUI 视图包装为 AppKit 可用的 NSHostingView
        let hostingView = NSHostingView(rootView: self.edgesIgnoringSafeArea(.all))
        hostingView.frame = CGRect(origin: .zero, size: targetSize)
        hostingView.layoutSubtreeIfNeeded()
        
        let image = NSImage(size: targetSize)
        image.lockFocus()
        if let cgContext = NSGraphicsContext.current?.cgContext {
            hostingView.layer?.render(in: cgContext)
        }
        image.unlockFocus()
        
        return image
    }
}

Retina 高清优化版本 #

基础版本在高分辨率屏幕上生成的图片可能会模糊，你可以使用适配屏幕缩放系数的优化版本：

extension View {
    func highResolutionSnapshot(size: CGSize? = nil) -> NSImage {
        let targetSize = size ?? sizeThatFits(
            .init(width: .greatestFiniteMagnitude, height: .greatestFiniteMagnitude)
        )
        // 取当前屏幕的缩放系数，默认按2x处理
        let scale = NSScreen.main?.backingScaleFactor ?? 2.0
        
        let hostingView = NSHostingView(rootView: self.edgesIgnoringSafeArea(.all))
        hostingView.frame = CGRect(origin: .zero, size: targetSize)
        hostingView.layoutSubtreeIfNeeded()
        
        let image = NSImage(size: targetSize)
        image.lockFocusFlipped(true)
        // 按缩放系数放大上下文渲染尺寸，保证 Retina 下清晰度
        NSGraphicsContext.current?.cgContext.scaleBy(x: scale, y: scale)
        hostingView.draw(hostingView.bounds)
        image.unlockFocus()
        
        return image
    }
}

使用示例 #

let demoView = Text("Hello SwiftUI for macOS")
    .font(.largeTitle)
    .foregroundColor(.indigo)
    .padding()
    .background(.white)
    .cornerRadius(8)

// 生成高清图片
let renderedImage = demoView.highResolutionSnapshot()

// 示例：将图片写入剪贴板
NSPasteboard.general.clearContents()
NSPasteboard.general.writeObjects([renderedImage])

注意事项 #

• 如果你的视图包含异步加载的内容、动画效果，需要等内容完全加载、动画结束后再调用快照方法，否则会得到空白/不完整的渲染结果
• 跨平台项目中可以用 #if os(iOS)、#if os(macOS) 编译宏分别封装两个平台的实现，统一对外调用接口

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