Flutter 图片选取及裁剪

在开发项目里修改用户头像的功能,涉及到图片选取及裁剪,基本实现步骤如下:

1、pubspec.yaml 添加 image_picker: ^1.0.1 image_cropper: ^4.0.1:

复制代码
dependencies:
  image_picker: ^1.0.1
  image_cropper: ^4.0.1
  flutter:
    sdk: flutter

2、AndroidManifest.xml 添加:

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

3、封装工具类 image_picker_helper.dart ,代码如下:

Dart 复制代码
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';

/// @description: 从相册或照相机里选取图片的工具,带裁剪功能
class ImagePickerHelper {
  BuildContext buildContext;

  ImagePickerHelper(this.buildContext);

  void pickImage(ImageSource source, ImagePickerCallback? callback) {
    ImagePicker().pickImage(source: source).then((image) {
      if (image == null) return;
      if (callback == null) return;
      callback.call(image);
    }).onError((error, stackTrace) {
      debugPrint("获取图片失败:$error");
    });
  }

  void cropImage(File originalImage, ImageCropCallback? callback) {
    Future<CroppedFile?> future = ImageCropper().cropImage(
      sourcePath: originalImage.path,
      maxWidth: 100,
      maxHeight: 100,
      uiSettings: [
        AndroidUiSettings(
            toolbarTitle: '',
            toolbarColor: Colors.white,
            statusBarColor: Colors.white,
            toolbarWidgetColor: Colors.green,
            initAspectRatio: CropAspectRatioPreset.square,
            lockAspectRatio: false),
        IOSUiSettings(
          title: '',
        ),
        WebUiSettings(
          context: buildContext,
        ),
      ],
    );
    future.then((value) {
      debugPrint("_cropImage path:${value == null ? "" : value.path}");
      if (value == null) return;
      if (callback == null) return;
      callback.call(value);
    }).onError((error, stackTrace) {
      debugPrint("裁剪图片失败:$error");
    });
  }

  void pickWithCropImage(ImageSource source, ImageCropCallback? callback) {
    pickImage(source, (xFile) {
      cropImage(File(xFile.path), callback);
    });
  }
}

typedef ImagePickerCallback = void Function(XFile xFile);
typedef ImageCropCallback = void Function(CroppedFile croppedFile);

4、使用示例:

Dart 复制代码
//ImageSource.camera 照相机 或 ImageSource.gallery 相册
    ImagePickerHelper(context).pickWithCropImage(ImageSource.gallery,
        (croppedFile) {
      //获取到剪切的文件路径,进行相关的操作
      debugPrint("croppedFile:${croppedFile.path}");
    });
相关推荐
小 黄 鸡6 小时前
Flutter 面试必会知识点详解(从基础到进阶)
flutter·面试·职场和发展
大龄秃头程序员13 小时前
Flutter 最少代码验证:为什么子 Isolate 调原生,一定要先回到主 Isolate?
flutter
FungLeo14 小时前
成为全栈·Flutter App 篇·分类、标签与搜索:移动端内容发现
flutter·移动开发·标签·搜索·分类管理·成为全栈
m0_7381858215 小时前
Flutter 鸿蒙化实战:the_apple_sign_in 适配 OpenHarmony,Apple 登录
flutter·华为·harmonyos·鸿蒙
m0_7381858215 小时前
Flutter 鸿蒙化实战:umeng_analytics_plugin 适配 OpenHarmony,友盟统计
flutter·华为·harmonyos·鸿蒙
FungLeo17 小时前
成为全栈·Flutter App 篇·列表分页与下拉刷新:去重、失败保留和返回位置
flutter·移动开发·下拉刷新·分页加载·列表优化·成为全栈
大龄秃头程序员19 小时前
【从一道面试题入手】深入理解 Dart 事件循环调度机制
flutter
恋猫de小郭19 小时前
Kotlin 2.5 的 Companion 改造,对 KMP 的重要升级
android·前端·flutter
程序员老刘1 天前
Flutter你看看人家RN
flutter·react native·ai编程
大龄秃头程序员2 天前
【Flutter Bloc 从 0 到 1】用最少代码跑通 Bloc
flutter