如何基于Uint8List图片数据绘制方框并保存

依赖准备 #

首先在pubspec.yaml中添加图片处理依赖包，用于像素级图片编辑：

dependencies:
  image: ^4.0.17 # 建议使用最新稳定版本

核心实现代码 #

以下是完整的处理逻辑，包含解码、画框、重新编码、保存全流程：

import 'dart:io';
import 'dart:typed_data';
import 'package:image/image.dart' as img;

Future<void> processFaceBoxesAndSave(Uint8List imageBytes, List<Rect> faceRects) async {
  // 1. 将Uint8List解码为可编辑的图片对象
  img.Image? editableImage = img.decodeImage(imageBytes);
  if (editableImage == null) {
    throw Exception('图片解码失败');
  }

  // 2. 遍历人脸坐标，绘制红色方框（线条宽度2）
  final boxColor = img.ColorUint8.rgb(255, 0, 0);
  for (final rect in faceRects) {
    // 若人脸检测返回的是比例坐标（0-1范围），需先转换为绝对像素坐标
    final absoluteRect = Rect.fromLTWH(
      rect.left * editableImage.width,
      rect.top * editableImage.height,
      rect.width * editableImage.width,
      rect.height * editableImage.height,
    );

    img.drawRect(
      editableImage,
      x1: absoluteRect.left.toInt(),
      y1: absoluteRect.top.toInt(),
      x2: absoluteRect.right.toInt(),
      y2: absoluteRect.bottom.toInt(),
      color: boxColor,
      thickness: 2,
    );
  }

  // 3. 将编辑后的图片重新编码为Uint8List（这里以PNG为例，也可改用JPG）
  Uint8List editedImageBytes = img.encodePng(editableImage);
  // 若需保存为JPG，可替换为：img.encodeJpg(editableImage, quality: 90)

  // 4. 将处理后的字节数据写入文件保存
  final saveFilePath = '/your/save/path/edited_image.png';
  await File(saveFilePath).writeAsBytes(editedImageBytes);
}

关键说明 #

• 坐标适配：如果人脸检测接口返回的是相对比例坐标（如left值为0.1代表距离左边缘10%宽度），必须先乘以图片宽高转换成绝对像素坐标，否则画框位置会出错
• 编码格式：可根据需求选择PNG（无损）或JPG（压缩），JPG可通过quality参数调整压缩质量（0-100）
• 无UI特性：全程仅处理字节数据，无需依赖Flutter Widget或任何UI组件，可在后台服务或纯Dart环境中运行

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