Flutter中无法渲染裁剪后图像问题求助

开发Flutter Android应用时，调用系统相机拍照后直接展示正常，但使用image库裁剪图像后无法渲染，报错android.graphics.ImageDecoder$DecodeException: Failed to create image decoder with message 'unimplemented'Input contained an error.。裁剪后传入Image.memory的是Uint8ArrayView，尝试类型转换无效，真机测试仍存在问题。

问题原因 #

你调用photoImageSquared.getBytes()获取的是原始像素数据（未经过JPG/PNG等标准图片格式编码），而Image.memory组件需要的是经过编码的图片字节流。Android的ImageDecoder无法识别原始像素数据，因此抛出解码失败的错误。

解决方案 #

裁剪完成后，使用image库的encodeJpg方法将裁剪后的图像对象重新编码为JPG格式的Uint8List，再传入Image.memory。

修正步骤 #

1. 导入编码方法：

import 'package:image/image.dart' show copyCrop, decodeJpg, encodeJpg;

2. 修改图像渲染的字节来源：
   将photoImageSquared.getBytes()替换为encodeJpg(photoImageSquared)。

完整修正后的代码 #

import 'dart:math' show min;

import 'package:flutter/material.dart'
    show
        BuildContext,
        CircularProgressIndicator,
        FutureBuilder,
        MaterialApp,
        Scaffold,
        StatelessWidget,
        Widget,
        debugPrint,
        runApp;
import 'package:flutter/material.dart' as material_widget;
import 'package:flutter/widgets.dart' show ConnectionState;
import 'package:image/image.dart' show copyCrop, decodeJpg, encodeJpg;
import 'package:image_picker/image_picker.dart'
    show ImagePicker, ImageSource, XFile;

void main() {
  runApp(
    const MyApp(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({
    super.key,
  });

  @override
  Widget build(
    BuildContext context,
  ) {
    return const MaterialApp(
      title: 'Flutter Crop Debug',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({
    super.key,
  });

  @override
  Widget build(
    BuildContext context,
  ) {
    return Scaffold(
      body: FutureBuilder<material_widget.Image>(
        future: getFuture(),
        builder: (
          context,
          snapshot,
        ) {
          if ((snapshot.connectionState == ConnectionState.done) &&
              (snapshot.data != null)) {
            return snapshot.data!;
          } else {
            return const CircularProgressIndicator();
          }
        },
      ),
    );
  }

  Future<material_widget.Image> getFuture() async {
    final ImagePicker picker = ImagePicker();

    final XFile? photoFile = await picker.pickImage(
      source: ImageSource.camera,
    );

    final photoImage = decodeJpg(
      await photoFile!.readAsBytes(),
    )!;

    final x = (photoImage.width > photoImage.height)
        ? ((photoImage.width - photoImage.height) ~/ 2)
        : 0;

    final y = (photoImage.height > photoImage.width)
        ? ((photoImage.height - photoImage.width) ~/ 2)
        : 0;

    final dimension = min(
      photoImage.width,
      photoImage.height,
    );

    final photoImageSquared = copyCrop(
      photoImage,
      x: x,
      y: y,
      width: dimension,
      height: dimension,
    );

    debugPrint('works up to here');

    return material_widget.Image.memory(
      encodeJpg(photoImageSquared),
    );
  }
}

补充说明 #

• 编码后的字节流既可以正常在Image.memory中渲染，也可以直接通过REST接口发送，符合需求。
• 若需要PNG格式，可替换encodeJpg为encodePng，同时确保导入该方法。

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