Flutter图像分割中Uint8List转ByteBuffer时出现RangeError求助

问题背景 #

开发一款基于Flutter的**图像分割（image segmentation）**应用，用户可上传或拍摄照片，通过TensorFlow Lite模型分析。但在使用image库将模型输出的像素数据转换为图像时，触发了RangeError。

工作流程 #

• 用户上传/拍摄照片
• 将照片调整为512x512像素
• 把调整后照片的像素数据输入TensorFlow Lite模型，模型输出每个像素的类别预测张量
• 根据模型输出生成颜色列表（List<int> pixelData），每个像素按预测类别显示红色或绿色
• 将pixelData转换为Uint8List再转为ByteBuffer，创建可视化分割结果的图像

问题代码片段 #

List<int> pixelData = [];
// 根据模型输出填充pixelData
// ...

// 将List<int>转为Uint8List
Uint8List byteData = Uint8List.fromList(pixelData);

// 尝试从byteData创建ByteBuffer
ByteBuffer buffer = byteData.buffer;

// 尝试从ByteBuffer创建图像
// 别在意imgimg，我是这么导入库的：import 'package:image/image.dart' as imgimg;
imgimg.Image? segmentedImage = imgimg.Image.fromBytes(
  width: imgWidth,
  height: imgHeight,
  bytes: buffer,
);

错误信息 #

RangeError (end): Invalid value: Not in inclusive range 261120..262144: 262656

pixelData的长度是262144，正好对应512x512图像每个像素用单个整数颜色值的情况，但转换或ByteBuffer处理显然出了问题。

完整函数参考 #

Future<void> _onUseImagePressed() async {
  if (_image == null) return;
  
  // 加载并调整图像大小
  imgimg.Image? image = imgimg.decodeImage(File(_image!.path).readAsBytesSync());
  imgimg.Image resizedImage = imgimg.copyResize(image!, width: 512, height: 512);

  // 准备模型输入
  var input = List.generate(1, (_) => List.generate(512, (_) => List.generate(512, (_) => List.generate(3, (_) => 0.0))));
  
  // 填充归一化后的像素值到输入
  for (int y = 0; y < 512; y++) {
    for (int x = 0; x < 512; x++) {
      var pixel = resizedImage.getPixel(x, y);
      input[0][y][x][0] = pixel.r / 255.0;
      input[0][y][x][1] = pixel.g / 255.0;
      input[0][y][x][2] = pixel.b / 255.0;
    }
  }

  // 运行TensorFlow Lite模型
  final interpreter = await Interpreter.fromAsset('assets/models/production_model_resnet50.tflite');
  var output = List.filled(1 * 512 * 512 * 2, 0).reshape([1, 512, 512, 2]);
  interpreter.run(input, output);

  // 根据模型输出生成像素数据
  List<int> pixelData = [];
  for (int y = 0; y < 512; y++) {
    for (int x = 0; x < 512; x++) {
      int classIndex = output[0][y][x][0] > output[0][y][x][1] ? 0 : 1;
      int color = classIndex == 0 ? 0xFFFF0000 : 0xFF00FF00;
      pixelData.add(color);
    }
  }

  // 将pixelData转换为Uint8List和ByteBuffer
  Uint8List byteData = Uint8List.fromList(pixelData);
  ByteBuffer buffer = byteData.buffer;

  // 尝试从字节创建图像
  try {
    imgimg.Image? segmentedImage = imgimg.Image.fromBytes(512, 512, buffer);
  } catch (e) {
    print("Error processing model output: $e");
  }
}

问题原因与解决方案 #

1. 错误根源 #

问题核心在于：

• pixelData中的每个元素是32位ARGB整数（占4字节），但直接用Uint8List.fromList(pixelData)会把每个整数拆成4个独立字节，总字节数变为512*512*4=1048576，远超过你预期的262144
• imgimg.Image.fromBytes默认采用PixelFormat.rgb（每个像素3字节），会按错误的字节数计算所需数据范围，加上Uint8List.buffer返回的是底层完整缓冲区，最终触发索引越界的RangeError

2. 正确转换方式 #

有两种可靠的解决思路：

方式一：直接构建Image对象并设置像素

这是最直观且不易出错的方法，完全避开字节转换的坑：

// 初始化512x512的ARGB图像
imgimg.Image segmentedImage = imgimg.Image(width: 512, height: 512);

// 逐个设置像素颜色
for (int y = 0; y < 512; y++) {
  for (int x = 0; x < 512; x++) {
    int color = pixelData[y * 512 + x];
    segmentedImage.setPixel(x, y, color);
  }
}

方式二：匹配像素格式的字节转换

如果坚持使用Image.fromBytes，需要将32位整数拆分为对应字节，并指定正确的像素格式：

List<int> byteList = [];
for (int color in pixelData) {
  // 拆分ARGB为单独字节（顺序：Alpha、Red、Green、Blue）
  byteList.add((color >> 24) & 0xFF); // Alpha通道
  byteList.add((color >> 16) & 0xFF); // Red通道
  byteList.add((color >> 8) & 0xFF);  // Green通道
  byteList.add(color & 0xFF);         // Blue通道
}

Uint8List byteData = Uint8List.fromList(byteList);
// 指定ARGB32格式，告诉库每个像素占4字节
imgimg.Image segmentedImage = imgimg.Image.fromBytes(
  width: 512,
  height: 512,
  bytes: byteData.buffer,
  format: imgimg.PixelFormat.argb32,
);

3. Flutter中可视化模型输出的优化方案 #

除了image库，还可以尝试这些更高效的方法：

• CustomPaint实时绘制：通过CustomPainter遍历像素，在画布上绘制对应颜色的小矩形，适合实时预览场景
• 蒙版叠加原图：用ColorFilter或ShaderMask将半透明的分割结果层叠加到原图上，更直观展示分割效果
• 使用tflite_flutter_helper库：这个专门为Flutter TensorFlow Lite开发的工具库，提供了图像预处理、结果可视化的封装方法，减少手动处理字节的工作量

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