在macOS的SwiftUI/Xcode中，如何将灰度Data转为ImageView？

问题描述 #

我有存储在Data对象中的[UInt8]类型数据，需要将其渲染为8位灰度图像。目前不清楚如何将CGImage转换为ImageView，下方代码除缺少返回值外可编译，但不确定正确性，请问需添加哪些代码才能将图像作为视图返回？

原代码：

import SwiftUI

struct ImageView_2: View {
    var data: Data
    
    var body: some View {
        
        let width = 320
        let height = 240
        
        let colorSpace = CGColorSpaceCreateDeviceGray()
        
        let context = CGContext(data: data.castToCPointer(), width: width, height: height, bitsPerComponent: 8, bytesPerRow: width, space: colorSpace, bitmapInfo: CGImageAlphaInfo.alphaOnly.rawValue)
        let imageRef = CGContext.makeImage(context!)
        let imageRep = NSBitmapImageRep(cgImage: imageRef()!)
        let image = imageRep.cgImage

        return
          //  .resizable()
          //  .aspectRatio(contentMode: .fit)
    }  
    
}

Data扩展：

extension Data {
    func castToCPointer<T>() -> T {
        return self.withUnsafeBytes { $0.pointee }
    }
}

问题分析与修正方案 #

原代码存在5处关键问题，逐一修正后即可正常返回灰度图像视图：

• Data扩展实现错误：原castToCPointer方法错误地取了Data的第一个字节作为返回值，而非像素数据的指针。
• CGContext的bitmapInfo参数错误：使用alphaOnly会把数据解析为alpha通道，而非灰度像素，需改为none（无alpha通道的8位灰度）。
• CGImage创建方式错误：调用了类方法CGContext.makeImage()而非实例方法context.makeImage()。
• 多余的NSBitmapImageRep转换：无需通过NSBitmapImageRep中转，直接用CGImage创建SwiftUI的Image即可。
• 未返回有效视图：缺少将CGImage转换为SwiftUI Image组件的代码。

修正后的完整代码 #

import SwiftUI

struct GrayScaleImageView: View {
    var data: Data
    // 固定图像尺寸，也可改为传入参数
    let imageWidth: Int = 320
    let imageHeight: Int = 240
    
    var body: some View {
        // 1. 安全获取像素数据的原始指针
        guard let pixelPointer = data.withUnsafeBytes({ $0.baseAddress }) else {
            // 数据无效时返回红色占位视图
            return Color.red.frame(width: CGFloat(imageWidth), height: CGFloat(imageHeight))
        }
        
        // 2. 创建灰度色彩空间
        let grayColorSpace = CGColorSpaceCreateDeviceGray()
        
        // 3. 创建CG上下文，配置8位灰度参数
        guard let context = CGContext(
            data: UnsafeMutableRawPointer(mutating: pixelPointer),
            width: imageWidth,
            height: imageHeight,
            bitsPerComponent: 8, // 每个分量8位
            bytesPerRow: imageWidth, // 每行字节数=宽度（每个像素1字节）
            space: grayColorSpace,
            bitmapInfo: CGImageAlphaInfo.none.rawValue // 无alpha通道
        ) else {
            return Color.red.frame(width: CGFloat(imageWidth), height: CGFloat(imageHeight))
        }
        
        // 4. 从上下文生成CGImage
        guard let cgImage = context.makeImage() else {
            return Color.red.frame(width: CGFloat(imageWidth), height: CGFloat(imageHeight))
        }
        
        // 5. 转换为SwiftUI Image并返回（iOS平台用UIImage，macOS用NSImage）
        return Image(uiImage: UIImage(cgImage: cgImage))
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: CGFloat(imageWidth), height: CGFloat(imageHeight))
    }
}

// macOS平台替换Image初始化代码：
// return Image(nsImage: NSImage(cgImage: cgImage, size: NSSize(width: imageWidth, height: imageHeight)))

可选：修正Data扩展 #

如果需要复用指针获取逻辑，可将原扩展改为：

extension Data {
    func rawPointer() -> UnsafeRawPointer? {
        return self.withUnsafeBytes { $0.baseAddress }
    }
}

使用时替换data.withUnsafeBytes({ $0.baseAddress })为data.rawPointer()即可。

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