使用Flutter extended_image包无法获取Android端编辑后图片的Uint8List数据

我在使用Flutter的extended_image包实现图片编辑功能，界面上图片加载、旋转、翻转、裁剪等操作都显示正常，但无论用哪种方式获取图片字节数据，得到的始终是原始图片的Uint8List，编辑后的修改完全没有生效。

现有代码 #

状态变量 #

final GlobalKey<ExtendedImageEditorState> editorKey = GlobalKey<ExtendedImageEditorState>();
late ExtendedImage img;

图片加载代码 #

img = ExtendedImage.file(
      File(widget.filePath),
      fit: BoxFit.contain,
      mode: ExtendedImageMode.editor,
      extendedImageEditorKey: editorKey,
      cacheRawData: true,
      initEditorConfigHandler: (state) => EditorConfig(
        maxScale: 8.0,
        cropRectPadding: EdgeInsets.all(20.0),
        hitTestSize: 20.0,
      ),
    );

编辑操作代码 #

editorKey.currentState?.flip();
// 或执行旋转操作
editorKey.currentState?.rotate();

两种无效的获取数据方式 #

方式1：通过ImageProvider读取

ImageProvider<Object> ip = img.image;
Uint8List? editedImageFromProvider = await getImageFromImageProvider(ip);

Future<Uint8List?> getImageFromImageProvider(ImageProvider provider) async {
    final ImageStream stream = provider.resolve(ImageConfiguration.empty);
    Completer<Uint8List?> completer = Completer<Uint8List?>();
    ImageStreamListener? listener;

    listener = ImageStreamListener(
      (ImageInfo info, bool synchronousCall) {
        final Future<ByteData?> byteData = info.image.toByteData(format: ImageByteFormat.png);
        byteData.then((value) {
          if (value != null) {
            completer.complete(value.buffer.asUint8List());
          } else {
            completer.complete(null);
          }
        });
        stream.removeListener(listener!);
      },
    );

    stream.addListener(listener);
    return completer.future;
  }

方式2：通过rawImageData读取

Uint8List? editedImageFromRaw = await getImageFromRaw(img);

Future<Uint8List?> getImageFromRaw(ExtendedImage image) async {
    final state = editorKey.currentState;
    if (state == null) {
      return null;
    }
    Uint8List result = await state.rawImageData;

    return result;
  }

已尝试的无效操作 #

• 移除加载代码中的cacheRawData: true，导致state.rawImageData失效，但ImageProvider仍返回原始图片数据

正确解决方案 #

extended_image的编辑器状态提供了专门的cropImage()方法，该方法会自动应用所有编辑操作（旋转、翻转、裁剪），返回处理后的图片字节数据，而非原始图片数据。

示例代码 #

Future<Uint8List?> getEditedImage() async {
  final editorState = editorKey.currentState;
  if (editorState == null) return null;
  
  // 获取编辑后的图片数据，可指定输出格式和质量
  final editedData = await editorState.cropImage(
    format: ImageFormat.png,
    quality: 100, // 仅对JPEG格式有效，范围0-100
  );
  
  return editedData;
}

关键说明 #

• cropImage()方法会整合所有已执行的编辑操作，返回与界面显示一致的图片数据
• 支持通过format参数指定输出格式（ImageFormat.png或ImageFormat.jpeg）
• 若使用JPEG格式，可通过quality参数调整图片压缩质量，数值越高质量越好

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