Flutter image_cropper 图片裁切库的使用

29 min read

Flutter image_cropper 是一个用于裁剪图像的 Flutter 插件。它支持 Android 和 iOS 平台,并提供了许多控制裁剪选项的方法。

下面是使用 Flutter image_cropper 图片裁切库的步骤:

步骤 1:安装 image_cropper 插件

在你的工程 pubspec.yaml 中添加以下内容:

dependencies:
  image_cropper: ^1.4.1

然后在终端运行以下命令安装插件:

flutter packages get

步骤 2:设置裁剪选项

你可以设置裁剪选项来控制裁剪的方式和结果。以下是一些示例设置:

import 'package:image_cropper/image_cropper.dart';

Future<void> _cropImage(String imagePath) async {
    File croppedFile = await ImageCropper.cropImage(
      sourcePath: imagePath,
      aspectRatioPresets: [
        CropAspectRatioPreset.square,
        CropAspectRatioPreset.ratio3x2,
        CropAspectRatioPreset.original,
        CropAspectRatioPreset.ratio4x3,
        CropAspectRatioPreset.ratio16x9
      ],
      androidUiSettings: AndroidUiSettings(
          toolbarColor: Colors.deepOrange,
          toolbarTitle: "RPS Cropper",
          statusBarColor: Colors.deepOrange.shade900,
          backgroundColor: Colors.grey,
          // When user tap [Gallery] tab.
          lockAspectRatio: false),
      iosUiSettings: IOSUiSettings(
        title: 'RPS Cropper',
      )
    );
}

在这个例子中,我们将设置裁剪选项来使用户可以选择 5 种不同的纵横比例。AndroidUiSettings 中提供了其他选项,如十字线的颜色、裁剪框的最大/最小尺寸等。

步骤 3:裁剪图片

一旦设置裁剪选项,你可以将图片路径传递给 ImageCropper.cropImage() 方法来裁剪图片。

File croppedFile = await ImageCropper.cropImage(
  sourcePath: imagePath,
  // 裁剪选项
  aspectRatioPresets: [
        CropAspectRatioPreset.square,
        CropAspectRatioPreset.ratio3x2,
        CropAspectRatioPreset.original,
        CropAspectRatioPreset.ratio4x3,
        CropAspectRatioPreset.ratio16x9
  ],
  androidUiSettings: AndroidUiSettings(
      toolbarColor: Colors.deepOrange,
      toolbarTitle: "RPS Cropper",
      statusBarColor: Colors.deepOrange.shade900,
      backgroundColor: Colors.grey,
      lockAspectRatio: false),
  iosUiSettings: IOSUiSettings(
    title: 'RPS Cropper',
  )
);

if (croppedFile != null) {
  // 处理裁剪后的图片
}

ImageCropper.cropImage() 方法返回一个 File 对象,表示裁剪后的图片。

你可以根据需要处理裁剪后的图片,如上传到服务器、保存到本地等。

完成!这就是使用 Flutter image_cropper 图片裁切库的全部内容。现在你可以在你的应用程序中使用它来让用户剪裁他们的照片了。