Flutter相机拍摄图片后，如何基于矩形遮罩进行裁剪？

1. 添加依赖 #

在pubspec.yaml中补充image_cropper依赖（配合你已使用的camera包）：

dependencies:
  flutter:
    sdk: flutter
  camera: ^0.10.5+5 # 保留你当前使用的版本
  image_cropper: ^5.0.0 # 选用最新稳定版

执行flutter pub get完成依赖安装。

2. 配置平台权限 #

• Android：在android/app/src/main/AndroidManifest.xml中添加权限声明：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

• iOS：在ios/Runner/Info.plist中添加权限描述：

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以保存裁剪后的图片</string>

3. 替换原有拍摄逻辑 #

修改你当前的拍摄代码，加入裁剪流程，最终将裁剪后的图片路径赋值给model.img：

// 拍摄原图
final image = await _controller.takePicture();

// 调用矩形裁剪功能
final CroppedFile? croppedFile = await ImageCropper().cropImage(
  sourcePath: image.path,
  aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1), // 自定义矩形遮罩的宽高比，示例为1:1正方形
  aspectRatioPresets: [CropAspectRatioPreset.square], // 可选的预设比例列表
  uiSettings: [
    AndroidUiSettings(
      toolbarTitle: '裁剪图片',
      lockAspectRatio: true, // 锁定比例，强制按设置的矩形裁剪
    ),
    IOSUiSettings(
      title: '裁剪图片',
      aspectRatioLockEnabled: true,
    ),
  ],
);

// 处理裁剪结果
if (croppedFile != null) {
  model.img = croppedFile.path; // 赋值裁剪后的图片路径
} else {
  // 用户取消裁剪时，可选择保留原图或做其他处理
  model.img = image.path;
}

4. 关键参数说明 #

• aspectRatio：自定义矩形遮罩的宽高比例，比如ratioX: 4, ratioY: 3可设置4:3的矩形
• lockAspectRatio：设为true时，用户无法调整裁剪框比例，严格遵循你设置的矩形遮罩
• uiSettings：配置不同平台的裁剪界面样式，比如标题、按钮显示等

注意事项 #

• 裁剪后的图片默认保存在应用临时目录或系统相册，路径由image_cropper自动管理
• 可通过compressFormat、compressQuality参数优化裁剪后图片的格式与质量
• 务必处理用户取消裁剪的场景，避免model.img出现空值

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