Flutter中image_picker选取图片自动旋转问题求解

问题原因 #

部分图片拍摄时会在EXIF元数据中记录方向信息，相册APP会自动读取该信息并旋转图片显示，但image_picker插件默认的处理可能未正确解析或应用该方向（尤其是设置imageQuality压缩后），导致返回的图片与相册显示不一致。

解决方案 #

方案1：显式开启自动校正方向 #

首先尝试显式设置autoCorrectOrientation参数（虽然默认值为true，但显式设置可避免版本兼容问题）：

Future<XFile?> _getImage(ImageSource source, ImagePicker _picker) async {
  final pickedFile = await _picker.pickImage(
    source: source,
    imageQuality: 25,
    autoCorrectOrientation: true, // 显式开启自动校正
  );
  return pickedFile;
}

如果该方案无效，说明插件的自动校正未覆盖所有EXIF场景，可使用方案2手动处理。

方案2：手动处理EXIF方向并保留元数据 #

通过exif库读取方向信息，使用image库旋转图片，同时保留其他元数据：

1. 添加依赖到pubspec.yaml：

dependencies:
  exif: ^1.0.0
  image: ^4.0.17

2. 编写图片方向校正函数：

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

Future<File> fixImageOrientation(File imageFile) async {
  // 读取图片字节与EXIF数据
  final bytes = await imageFile.readAsBytes();
  final exifData = await readExifFromBytes(bytes);

  // 获取EXIF方向标记
  final orientationTag = exifData['Image Orientation'];
  final orientation = orientationTag?.values[0] ?? 1;

  // 方向正常则直接返回原文件
  if (orientation == 1) return imageFile;

  // 解码图片并根据方向旋转
  img.Image image = img.decodeImage(bytes)!;
  switch (orientation) {
    case 2:
      image = img.flipHorizontal(image);
      break;
    case 3:
      image = img.rotate180(image);
      break;
    case 4:
      image = img.flipVertical(image);
      break;
    case 5:
      image = img.flipHorizontal(img.rotate90(image));
      break;
    case 6:
      image = img.rotate90(image);
      break;
    case 7:
      image = img.flipHorizontal(img.rotate270(image));
      break;
    case 8:
      image = img.rotate270(image);
      break;
  }

  // 移除已处理的方向标记，保留其他元数据
  exifData.remove('Image Orientation');

  // 将旋转后的图片与更新后的EXIF合并
  final newImageBytes = img.encodeJpg(image);
  final updatedBytesWithExif = await writeExifToBytes(newImageBytes, exifData);

  // 保存为临时文件
  final fixedFile = File('${imageFile.path}_fixed.jpg');
  await fixedFile.writeAsBytes(updatedBytesWithExif);

  return fixedFile;
}

3. 在图片选取函数中调用校正函数：

Future<XFile?> _getImage(ImageSource source, ImagePicker _picker) async {
  final pickedFile = await _picker.pickImage(
    source: source,
    imageQuality: 25,
  );
  if (pickedFile == null) return null;

  // 校正图片方向并保留元数据
  final fixedFile = await fixImageOrientation(File(pickedFile.path));
  return XFile(fixedFile.path);
}

注意事项 #

• 处理后的图片会生成新的临时文件，可根据业务需求决定是否删除原文件或临时文件。
• 若仅需显示时正确旋转而不修改图片文件，可在展示图片时读取EXIF方向并通过Transform组件旋转，但此方式不会改变图片本身的字节数据。

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