Flutter中不使用dart:ui将Image转为Uint8List的替代方案

问题背景 #

使用dart:ui的image.toByteData()方法在应用后台运行时会触发崩溃，因此改用image库（pub.dev上的image包）实现相同逻辑，避免后台崩溃问题。

实现步骤 #

• 1. 添加image库依赖到pubspec.yaml
• 2. 将原基于dart:ui的绘制逻辑迁移到image库的API
• 3. 直接通过image库完成图片解码、绘制、编码全流程

替代代码示例 #

首先确保已添加依赖：

dependencies:
  image: ^4.0.17 # 请使用最新版本

然后替换原代码：

import 'package:image/image.dart' as img_lib;

// 调整loadImageFromUrl返回图片字节流（若原方法返回dart:ui.Image，需在前台提前转为Uint8List）
var imageBytes = await loadImageFromUrl(event.imgUrl);
// 解码图片为image库的Image对象
img_lib.Image srcImage = img_lib.decodeImage(imageBytes)!;

// 创建目标画布，尺寸与原逻辑一致
img_lib.Image destImage = img_lib.Image(size.width.toInt(), size.height.toInt());
img_lib.Canvas canvas = img_lib.Canvas(destImage);

// 绘制原始图片到画布
canvas.drawImage(srcImage, 0, 0);

// 迁移原BoxPainter的绘制逻辑（示例：绘制boxes矩形，需根据原BoxPainter实现调整）
for (var box in boxes) {
  // 假设box包含位置、尺寸及颜色信息
  canvas.drawRect(
    img_lib.Rectangle(box.left, box.top, box.width, box.height),
    img_lib.Paint()..color = img_lib.ColorRgb8(255, 0, 0), // 替换为原逻辑的颜色配置
  );
}

// 编码为Uint8List（支持png/jpg等格式，此处以png为例）
final result = img_lib.encodePng(destImage);

关键说明 #

• 若原loadImageFromUrl返回dart:ui.Image，需在前台完成转Uint8List操作（避免后台调用dart:ui方法），或直接修改加载逻辑获取原始字节流。
• 原BoxPainter中的自定义绘制逻辑（如画线、文字、颜色混合等）需对应替换为image库的API，可参考库文档调整细节。
• image库的操作均为纯Dart实现，不依赖Flutter引擎UI线程，后台运行不会触发崩溃。

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