Flutter图片裁剪插件sparrow_image_cropper的使用

Flutter图片裁剪插件sparrow_image_cropper的使用

Sparrow Image Cropper 是一个用于Android和iOS平台的Flutter插件，支持图片裁剪功能。该插件基于两个不同的原生库（uCrop 和 TOCropViewController），因此在不同平台上具有不同的用户界面。

介绍

Image Cropper 不直接在Dart代码中处理图像，而是通过平台通道（Platform Channels）暴露给Flutter应用可以使用的API，以与两个非常强大的原生库（uCrop 和 TOCropViewController）通信来裁剪和旋转图像。因此，所有功劳归于这些库。

uCrop - Yalantis

TOCropViewController - TimOliver

如何安装

Android

1. 将 UCropActivity 添加到你的 AndroidManifest.xml 文件中：

<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

注意：

从v1.2.0版本开始，你需要将你的Android项目迁移到v2嵌入（详情见这里）。

iOS

无需配置。

使用方法

必须参数

• sourcePath: 图像文件的绝对路径。

可选参数

• maxWidth: 裁剪后图像的最大宽度。
• maxHeight: 裁剪后图像的最大高度。
• aspectRatio: 控制裁剪边界的比例。如果设置此值，则裁剪器会被锁定，用户无法更改裁剪边界的比例。
• aspectRatioPresets: 控制裁剪菜单视图中的比例列表。在Android上，可以通过设置 AndroidUiSettings.initAspectRatio 的值来初始化裁剪时的比例。
• cropStyle: 控制裁剪边框的样式，可以是矩形或圆形（默认为 CropStyle.rectangle）。
• compressFormat: 结果图像的格式，可以是png或jpg（默认为 ImageCompressFormat.jpg）。
• compressQuality: 控制图像压缩质量的值 [0 - 100]。
• androidUiSettings: 控制Android上的UI自定义。详见Android自定义。
• iosUiSettings: 控制iOS上的UI自定义。详见iOS自定义。

注意：

结果文件保存在iOS的 NSTemporaryDirectory 和Android的应用程序缓存目录中，因此可能会丢失。如果你需要永久保存，需要自己负责存储。

自定义

Android

Image Cropper 提供了一个名为 AndroidUiSettings 的辅助类，该类封装了可以在 uCrop 库中自定义UI的所有属性。

iOS

Image Cropper 提供了一个名为 IOSUiSettings 的辅助类，该类封装了可以在 TOCropViewController 库中自定义UI的所有属性。

示例

以下是一个完整的示例，展示了如何使用 sparrow_image_cropper 插件进行图片裁剪。

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';

import 'package:sparrow_image_cropper/sparrow_image_cropper.dart';
import 'package:sparrow_image_picker/sparrow_image_picker.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ImageCropper',
      theme: ThemeData.light().copyWith(primaryColor: Colors.deepOrange),
      home: MyHomePage(
        title: 'ImageCropper',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({required this.title});

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

enum AppState {
  free,
  picked,
  cropped,
}

class _MyHomePageState extends State<MyHomePage> {
  late AppState state;
  File? imageFile;

  [@override](/user/override)
  void initState() {
    super.initState();
    state = AppState.free;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: imageFile != null ? Image.file(imageFile!) : Container(),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.deepOrange,
        onPressed: () {
          if (state == AppState.free)
            _pickImage();
          else if (state == AppState.picked)
            _cropImage();
          else if (state == AppState.cropped) _clearImage();
        },
        child: _buildButtonIcon(),
      ),
    );
  }

  Widget _buildButtonIcon() {
    if (state == AppState.free)
      return Icon(Icons.add);
    else if (state == AppState.picked)
      return Icon(Icons.crop);
    else if (state == AppState.cropped)
      return Icon(Icons.clear);
    else
      return Container();
  }

  Future<void> _pickImage() async {
    final pickedImage = await ImagePicker().pickImage(source: ImageSource.gallery);
    imageFile = pickedImage != null ? File(pickedImage.path) : null;
    if (imageFile != null) {
      setState(() {
        state = AppState.picked;
      });
    }
  }

  Future<void> _cropImage() async {
    File? croppedFile = await ImageCropper.cropImage(
        sourcePath: imageFile!.path,
        aspectRatioPresets: Platform.isAndroid
            ? [
                CropAspectRatioPreset.square,
                CropAspectRatioPreset.ratio3x2,
                CropAspectRatioPreset.original,
                CropAspectRatioPreset.ratio4x3,
                CropAspectRatioPreset.ratio16x9
              ]
            : [
                CropAspectRatioPreset.original,
                CropAspectRatioPreset.square,
                CropAspectRatioPreset.ratio3x2,
                CropAspectRatioPreset.ratio4x3,
                CropAspectRatioPreset.ratio5x3,
                CropAspectRatioPreset.ratio5x4,
                CropAspectRatioPreset.ratio7x5,
                CropAspectRatioPreset.ratio16x9
              ],
        androidUiSettings: AndroidUiSettings(
            toolbarTitle: 'Cropper',
            toolbarColor: Colors.deepOrange,
            toolbarWidgetColor: Colors.white,
            initAspectRatio: CropAspectRatioPreset.original,
            lockAspectRatio: false),
        iosUiSettings: IOSUiSettings(
          title: 'Cropper',
        ));
    if (croppedFile != null) {
      imageFile = croppedFile;
      setState(() {
        state = AppState.cropped;
      });
    }
  }

  void _clearImage() {
    imageFile = null;
    setState(() {
      state = AppState.free;
    });
  }
}