Flutter图片裁剪插件image_cropper_plus的使用

Flutter图片裁剪插件image_cropper_plus的使用

image_cropper_plus 是一个用于Android、iOS和Web平台的Flutter插件，支持图片裁剪。该插件基于三个不同的原生库（uCrop、TOCropViewController和croppie），因此在不同平台上具有不同的用户界面。

简介

image_cropper_plus 并不直接在Dart代码中处理图片，而是通过平台通道将Dart API暴露给Flutter应用，从而与强大的原生库（如uCrop、TOCropViewController和croppie）进行交互以实现图片裁剪和旋转。所有功劳归于这些库。

uCrop - Yalantis

<uCrop> 是一个旨在提供终极且灵活的图像裁剪体验的项目。它是由Yalantis团队开发的。

TOCropViewController - TimOliver

TOCropViewController 是一个开源的 UIViewController 子类，用于裁剪出 UIImage 对象的部分，并执行基本的旋转。它非常适合编辑个人资料照片或在线分享照片的一部分。

Croppie - Foliotek

Croppie 是一个快速、易于使用的图像裁剪插件，具有大量的配置选项！

如何安装

Android

  1. 在 AndroidManifest.xml 中添加 UCropActivity:
<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

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

iOS

无需任何配置。

Web

在 web/index.html 文件的 <head> 标签内添加以下代码：

<head>
  ....

  <!-- Croppie -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>

  ....
</head>

使用

必需参数

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

可选参数

  • maxWidth: 裁剪后的最大图像宽度。（Web上忽略）
  • maxHeight: 裁剪后的最大图像高度。（Web上忽略）
  • aspectRatio: 控制裁剪区域的宽高比。如果设置了此值，则裁剪框会被锁定，用户无法改变宽高比。（Web上忽略）
  • aspectRatioPresets: 控制裁剪菜单视图中的宽高比列表。在Android中，可以通过设置 AndroidUiSettings.initAspectRatio 的值来初始化宽高比。（Web上忽略）
  • cropStyle: 控制裁剪框的样式，可以是矩形或圆形（默认为 CropStyle.rectangle）。在Web上，此字段可以被 WebUiSettings.viewPort.type 覆盖。
  • compressFormat: 结果图像的格式，png或jpg（默认为 ImageCompressFormat.jpg）。
  • compressQuality: 0到100之间的数字，控制图像压缩的质量。
  • uiSettings: 控制特定平台（Android、iOS、Web等）的UI定制。

注意事项

  • 结果文件保存在iOS的 NSTemporaryDirectory 和Android的应用缓存目录中，因此可能会丢失。如有必要，请将其存储在永久位置。
  • Web上的实现与移动应用有很大的不同，导致某些配置字段（如 maxWidth、maxHeight、aspectRatio、aspectRatioPresets）在Web上不起作用。
  • 对于Web，需要使用 WebUiSettings。

自定义

Android

<uCrop> 提供了一个名为 AndroidUiSettings 的帮助类，可以用来定制uCrop库的UI。

iOS

TOCropViewController 提供了一个名为 IOUiSettings 的帮助类，可以用来定制TOCropViewController库的UI。

Web

<uCrop> 提供了一个名为 WebUiSettings 的帮助类，可以用来定制croppie库的UI。

示例代码

import 'package:image_cropper_plus/image_cropper_plus.dart';

Future<void> _cropImage() async {
  if (_pickedFile != null) {
    final croppedFile = await ImageCropper().cropImage(
      sourcePath: _pickedFile!.path,
      compressFormat: ImageCompressFormat.jpg,
      compressQuality: 100,
      uiSettings: [
        AndroidUiSettings(
            toolbarTitle: 'Cropper',
            toolbarColor: Colors.deepOrange,
            toolbarWidgetColor: Colors.white,
            initAspectRatio: CropAspectRatioPreset.original,
            lockAspectRatio: false),
        IOSUiSettings(
          title: 'Cropper',
          doneButtonTitleColor: Colors.red,
          cancelButtonTitleColor: Colors.amber,
        ),
        WebUiSettings(
          context: context,
          presentStyle: CropperPresentStyle.dialog,
          boundary: const CroppieBoundary(
            width: 520,
            height: 520,
          ),
          viewPort:
              const CroppieViewPort(width: 480, height: 480, type: 'circle'),
          enableExif: true,
          enableZoom: true,
          showZoomer: true,
        ),
      ],
    );
    if (croppedFile != null) {
      setState(() {
        _croppedFile = croppedFile;
      });
    }
  }
}

代码解释

// 导入必要的包
import 'package:image_cropper_plus/image_cropper_plus.dart';

// 定义一个异步函数来裁剪图片
Future<void> _cropImage() async {
  // 如果已经选择了图片
  if (_pickedFile != null) {
    // 调用ImageCropper的cropImage方法进行裁剪
    final croppedFile = await ImageCropper().cropImage(
      // 指定源图片路径
      sourcePath: _pickedFile!.path,
      // 设置压缩格式为JPEG
      compressFormat: ImageCompressFormat.jpg,
      // 设置压缩质量为100%
      compressQuality: 100,
      // 设置UI定制参数
      uiSettings: [
        // Android UI定制
        AndroidUiSettings(
          // 设置工具栏标题
          toolbarTitle: 'Cropper',
          // 设置工具栏颜色
          toolbarColor: Colors.deepOrange,
          // 设置工具栏文字和按钮的颜色
          toolbarWidgetColor: Colors.white,
          // 初始化宽高比
          initAspectRatio: CropAspectRatioPreset.original,
          // 锁定宽高比
          lockAspectRatio: false,
        ),
        // iOS UI定制
        IOSUiSettings(
          // 设置工具栏标题
          title: 'Cropper',
          // 设置完成按钮文字颜色
          doneButtonTitleColor: Colors.red,
          // 设置取消按钮文字颜色
          cancelButtonTitleColor: Colors.amber,
        ),
        // Web UI定制
        WebUiSettings(
          // 传递当前BuildContext
          context: context,
          // 设置裁剪对话框样式
          presentStyle: CropperPresentStyle.dialog,
          // 设置裁剪边界大小
          boundary: const CroppieBoundary(
            width: 520,
            height: 520,
          ),
          // 设置裁剪视口大小
          viewPort:
              const CroppieViewPort(width: 480, height: 480, type: 'circle'),
          // 启用EXIF读取
          enableExif: true,
          // 启用缩放功能
          enableZoom: true,
          // 显示缩放器
          showZoomer: true,
        ),
      ],
    );
    // 如果裁剪成功
    if (croppedFile != null) {
      // 更新状态
      setState(() {
        _croppedFile = croppedFile;
      });
    }
  }
}

代码解释

  1. 导入必要的包：

    import 'package:image_cropper_plus/image_cropper_plus.dart';

  2. 定义一个异步函数来裁剪图片：

    Future<void> _cropImage() async {

  3. 检查是否已选择图片：

    if (_pickedFile != null) {

  4. 调用ImageCropper的cropImage方法进行裁剪：

    final croppedFile = await ImageCropper().cropImage(
  sourcePath: _pickedFile!.path,
  compressFormat: ImageCompressFormat.jpg,
  compressQuality: 100,
  uiSettings: [
    AndroidUiSettings(
      toolbarTitle: 'Cropper',
      toolbarColor: Colors.deepOrange,
      toolbarWidgetColor: Colors.white,
      initAspectRatio: CropAspectRatioPreset.original,
      lockAspectRatio: false,
    ),
    IOSUiSettings(
      title: 'Cropper',
      doneButtonTitleColor: Colors.red,
      cancelButtonTitleColor: Colors.amber,
    ),
    WebUiSettings(
      context: context,
      presentStyle: CropperPresentStyle.dialog,
      boundary: const CroppieBoundary(
        width: 520,
        height: 520,
      ),
      viewPort:
          const CroppieViewPort(width: 480, height: 480, type: 'circle'),
      enableExif: true,
      enableZoom: true,
      showZoomer: true,
    ),
  ],
);

  5. 如果裁剪成功：

    if (croppedFile != null) {
  setState(() {
    _croppedFile = croppedFile;
  });
}

更多关于Flutter图片裁剪插件image_cropper_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片裁剪插件image_cropper_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


image_cropper_plus 是一个用于 Flutter 应用的图片裁剪插件，基于 image_cropper 插件并进行了扩展。它允许用户从图库或相机选择图片，并进行裁剪操作。以下是如何使用 image_cropper_plus 插件的详细步骤。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 image_cropper_plus 依赖：

dependencies:
  flutter:
    sdk: flutter
  image_cropper_plus: ^1.0.0  # 请查看最新版本

然后运行 flutter pub get 来安装依赖。

2. 配置平台相关设置

Android

在 AndroidManifest.xml 文件中添加以下权限：

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

确保在 android/app/build.gradle 中设置 minSdkVersion 为 21 或更高。

iOS

在 Info.plist 文件中添加以下权限：

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以选择图片</string>
<key>NSCameraUsageDescription</key>
<string>需要使用相机拍摄图片</string>

3. 使用 image_cropper_plus

以下是一个简单的示例，展示如何使用 image_cropper_plus 进行图片裁剪。

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:image_cropper_plus/image_cropper_plus.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageCropExample(),
    );
  }
}

class ImageCropExample extends StatefulWidget {
  @override
  _ImageCropExampleState createState() => _ImageCropExampleState();
}

class _ImageCropExampleState extends State<ImageCropExample> {
  File? _imageFile;

  Future<void> _pickAndCropImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      final croppedFile = await ImageCropperPlus.cropImage(
        sourcePath: pickedFile.path,
        aspectRatioPresets: [
          CropAspectRatioPreset.square,
          CropAspectRatioPreset.ratio3x2,
          CropAspectRatioPreset.original,
          CropAspectRatioPreset.ratio4x3,
          CropAspectRatioPreset.ratio16x9,
        ],
        androidUiSettings: AndroidUiSettings(
          toolbarTitle: '裁剪图片',
          toolbarColor: Colors.deepOrange,
          toolbarWidgetColor: Colors.white,
          initAspectRatio: CropAspectRatioPreset.original,
          lockAspectRatio: false,
        ),
        iosUiSettings: IOSUiSettings(
          title: '裁剪图片',
        ),
      );

      if (croppedFile != null) {
        setState(() {
          _imageFile = File(croppedFile.path);
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Cropper Plus Example'),
      ),
      body: Center(
        child: _imageFile != null
            ? Image.file(_imageFile!)
            : Text('没有选择图片'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _pickAndCropImage,
        tooltip: 'Pick and Crop Image',
        child: Icon(Icons.crop),
      ),
    );
  }
}

4. 解释代码

  • ImagePicker: 用于从图库或相机选择图片。
  • ImageCropperPlus.cropImage: 用于裁剪图片。你可以设置裁剪的宽高比 (aspectRatioPresets)、安卓和iOS的UI设置等。
  • File: 用于存储和显示裁剪后的图片。

5. 运行应用

运行你的 Flutter 应用，点击浮动按钮选择并裁剪图片。裁剪后的图片将显示在应用界面上。

6. 其他功能

image_cropper_plus 还提供了更多的裁剪选项，例如设置裁剪框的颜色、边框宽度等。你可以根据需要进行自定义。

final croppedFile = await ImageCropperPlus.cropImage(
  sourcePath: pickedFile.path,
  aspectRatioPresets: [
    CropAspectRatioPreset.square,
    CropAspectRatioPreset.ratio3x2,
    CropAspectRatioPreset.original,
    CropAspectRatioPreset.ratio4x3,
    CropAspectRatioPreset.ratio16x9,
  ],
  androidUiSettings: AndroidUiSettings(
    toolbarTitle: '裁剪图片',
    toolbarColor: Colors.deepOrange,
    toolbarWidgetColor: Colors.white,
    initAspectRatio: CropAspectRatioPreset.original,
    lockAspectRatio: false,
    activeControlsWidgetColor: Colors.blue,
    activeCropAspectRatio: CropAspectRatioPreset.ratio16x9,
  ),
  iosUiSettings: IOSUiSettings(
    title: '裁剪图片',
    aspectRatioLockDimensionSwapEnabled: true,
    aspectRatioLockEnabled: true,
    rotateButtonsHidden: true,
  ),
);
回到顶部