Flutter中如何在Widget中显示iOS端的CVPixelBuffer？

iOS端处理流程 #

要把CVPixelBuffer传给Flutter，需要先将其转换成Flutter可接收的字节数据，步骤如下：

1. 把CVPixelBuffer转换成UIImage

// 锁定像素缓冲区地址
CVPixelBufferLockBaseAddress(pixelBuffer, 0);

// 创建CG上下文
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(
    CVPixelBufferGetBaseAddress(pixelBuffer),
    CVPixelBufferGetWidth(pixelBuffer),
    CVPixelBufferGetHeight(pixelBuffer),
    8,
    CVPixelBufferGetBytesPerRow(pixelBuffer),
    colorSpace,
    kCGImageAlphaNoneSkipFirst | kCGBitmapByteOrder32Little
);

// 生成CGImage和UIImage
CGImageRef cgImage = CGBitmapContextCreateImage(context);
UIImage *uiImage = [UIImage imageWithCGImage:cgImage];

// 释放资源
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
CGImageRelease(cgImage);
CVPixelBufferUnlockBaseAddress(pixelBuffer, 0);

2. 将UIImage转成字节数据并通过平台通道返回

// 转换成PNG格式的NSData（也可用UIImageJPEGRepresentation生成JPEG数据）
NSData *imageData = UIImagePNGRepresentation(uiImage);
// 包装成FlutterStandardTypedData
FlutterStandardTypedData *typedData = [FlutterStandardTypedData typedDataWithBytes:imageData];
// 通过平台通道回调返回结果
result(typedData);

Flutter端接收与显示 #

在Flutter侧调用平台方法获取字节数据后，直接用Image.memory组件渲染：

1. 调用平台通道获取数据

// 假设已初始化好platformChannel
final Uint8List? imageBytes = await platformChannel.invokeMethod('getProcessedImage');

2. 渲染图像

if (imageBytes != null) {
  return Image.memory(
    imageBytes,
    fit: BoxFit.contain,
  );
} else {
  return const Center(child: Text('图像加载失败'));
}

注意事项 #

• 性能优化：如果是实时预览场景，转PNG可能有性能损耗，可以尝试缩小图像尺寸，或者改用JPEG格式（调整压缩质量平衡画质和速度）。
• 格式兼容：部分CVPixelBuffer的像素格式可能和示例中的RGB格式不同，需要调整CGBitmapContextCreate的参数（比如alpha通道、字节序）来匹配。

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