IT评测·应用市场-qidao123.com

标题: Flutter 相机、相册图片裁剪问题处置惩罚与封装使用（image_picker、image_crop [打印本页]

---

作者: tsx81429    时间: 2025-3-16 09:28
标题: Flutter 相机、相册图片裁剪问题处置惩罚与封装使用（image_picker、image_crop
一、安装

• 安装插件，留意：裁剪库 必要额外配置
  
  1. # 相机、相册库
  2. $ flutter pub add image_picker
  3. # 裁剪库
  4. $ flutter pub add image_cropper

  复制代码
• 每次修改了配置，必要 clean 在 get 重新安装，要不然会使用编译好的缓存运行，所以避免问题，从根本解决问题：
  
  1. # 先清空
  2. $ flutter clean
  3. # 再安装
  4. $ flutter pub get
  5. # 运行
  6. $ flutter run

  复制代码
• Android 权限配置，文件路径 android/app/src/main/AndroidManifest.xml
  
  1. <!-- 请求相机权限 -->
  2. <uses-permission android:name="android.permission.CAMERA"/>
  3. <!-- 请求读取存储权限（读取相册） -->
  4. <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  5. <!-- 请求写入存储权限（选择和保存相册中的图片）-->
  6. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  7. <!-- 如果使用了访问相册，且是 Android 10（API 29）及以上版本，还需要配置 -->
  8. <uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION" />

  复制代码
  
  
  
• iOS 权限配置，文件路径 ios/Runner/Info.plist
  
  1. <key>Localization native development region</key>
  2. <string>zh_CN</string>
  3. <key>NSCameraUsageDescription</key>
  4. <string>我们需要访问您的相机</string>
  5. <key>NSPhotoLibraryUsageDescription</key>
  6. <string>我们需要访问您的照片库</string>

  复制代码
  Localization native development region 会使相机、相册打开后表现中文。附：# Flutter iOS 调起相机、相册表现英文，必要改成中文。
  

二、image_cropper 安卓问题处置惩罚

• 不必要裁剪功能，就不消看这段了。
  
• image_cropper 在 iOS 上没问题，但是在安卓上必要将 compileSdk 修改为 35，文件路径 android/app/build.gradle
  将来最新的版本可能不是 35，可能更高，按着报错改就行。
  
  
  
  不修改会报错：
  
  1. Your project is configured to compile against Android SDK 34, but the following plugin(s) require to be compiled against a higher Android SDK version:
  2. - image_cropper compiles against Android SDK 35
  3. Fix this issue by compiling against the highest Android SDK version (they are backward compatible).
  4. Add the following to /Users/dengzemiao/Desktop/Project/flutter/flutter-edu-app/android/app/build.gradle:
  6.     android {
  7.         compileSdk = 35
  8.         ...
  9.     }
  12. FAILURE: Build failed with an exception.
  14. * What went wrong:
  15. Execution failed for task ':app:processDebugResources'.
  16. > A failure occurred while executing com.android.build.gradle.internal.res.LinkApplicationAndroidResourcesTask$TaskAction
  17.    > Android resource linking failed
  18.      com.example.testbaseproject.app-mergeDebugResources-42:/values-v35/values-v35.xml:4: error: style attribute 'android:attr/windowOptOutEdgeToEdgeEnforcement' not found.
  19.      error: failed linking references.
  22. * Try:
  23. > Run with --stacktrace option to get the stack trace.
  24. > Run with --info or --debug option to get more log output.
  25. > Run with --scan to get full insights.
  26. > Get more help at https://help.gradle.org.
  28. BUILD FAILED in 9s

  复制代码
  修改后，还不行，必要确定 Android Studio 安装好了 35 的 sdk，留意安装包支持的 CPU 类型，安装好了就行了。
  
  
  
  
• nonono，再次运行，可以正常使用了，但是在拍好照片进行裁剪的还会报错，可能还会报错，一大串的，可以搜搜里面有没有 com.yalantis.ucrop.UCropActivity，就是缺少了 activity 的申明，所以还必要配置下，文件路径 android/app/src/main/AndroidManifest.xml
  在 application 里面再加一个 activity 申明：
  
  1. <activity android:name="com.yalantis.ucrop.UCropActivity"
  2.           android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

  复制代码
  
  
  
• 到这里就真的 ok 了，可以放心使用裁剪了，如果不必要裁剪反面这些配置可以不消配置，只要配置权限即可。
  

三、裁剪封装

• 使用
  
  1. // 导入
  2. import 'package:base_project/utils/camera_utils.dart';
  4. // 使用
  5. CustomBottomSheet.show(
  6.   context: context,
  7.   list: ['拍照', '打开相册'],
  8.   onConfirm: (index) async {
  9.     if (index == 0) {
  10.       // 打开相机
  11.       await camera.showCamera(
  12.         cropping: true,
  13.         onChanged: (value) => {
  14.           print('图片路径: $value')
  15.         }
  16.       );
  17.     } else {
  18.       // 打开相册
  19.       await camera.showAlbum(
  20.         cropping: true,
  21.         onChanged: (value) => {
  22.           print('图片路径: $value')
  23.         }
  24.       );
  25.     }
  26.   },
  27. );

  复制代码
• camera_utils.dart
  
  1. import 'package:flutter/material.dart';
  2. import 'package:image_picker/image_picker.dart';
  3. import 'package:image_cropper/image_cropper.dart';
  5. class CameraUtils {
  7.   // 静态变量存储单例
  8.   static final CameraUtils _instance = CameraUtils._internal();
  9.   // 静态方法获取单例实例
  10.   factory CameraUtils() => _instance;
  11.   // 私有构造函数，确保只能通过工厂方法获取实例
  12.   CameraUtils._internal();
  14.   // 静态的 _picker 变量，确保只会初始化一次
  15.   final ImagePicker _picker = ImagePicker();
  17.   // 打开相机
  18.   Future<void> showCamera({
  19.     bool? cropping,
  20.     ValueChanged<String>? onChanged
  21.   }) async {
  22.     try {
  23.       final XFile? file = await _picker.pickImage(source: ImageSource.camera);
  24.       if (file != null) {
  25.         if (cropping == true) {
  26.           await _cropImage(
  27.             path: file.path,
  28.             onChanged: onChanged
  29.           );
  30.         } else {
  31.           if (onChanged != null) { onChanged(file.path); }
  32.         }
  33.       } else {
  34.         if (onChanged != null) { onChanged(''); }
  35.       }
  36.     } catch (e) {
  37.       if (onChanged != null) { onChanged(''); }
  38.       // print('图片选择出错: $e');
  39.     }
  40.   }
  42.   // 打开相册
  43.   Future<void> showAlbum({
  44.     bool? cropping,
  45.     ValueChanged<String>? onChanged
  46.   }) async {
  47.     try {
  48.       final XFile? file = await _picker.pickImage(source: ImageSource.gallery);
  49.       if (file != null) {
  50.         if (cropping == true) {
  51.           await _cropImage(
  52.             path: file.path,
  53.             onChanged: onChanged
  54.           );
  55.         } else {
  56.           if (onChanged != null) { onChanged(file.path); }
  57.         }
  58.       } else {
  59.         if (onChanged != null) { onChanged(''); }
  60.       }
  61.     } catch (e) {
  62.       // print('图片选择出错: $e');
  63.       if (onChanged != null) { onChanged(''); }
  64.     }
  65.   }
  67.   // 图片裁剪方法
  68.   Future<void> _cropImage({
  69.     required String path,
  70.     ValueChanged<String>? onChanged
  71.   }) async {
  72.     try {
  73.       // 使用 image_cropper 进行裁剪
  74.       final file = await ImageCropper().cropImage(
  75.         sourcePath: path,
  76.         uiSettings: [
  77.           AndroidUiSettings(
  78.             toolbarTitle: '裁剪图片',
  79.             toolbarColor: Colors.deepOrange,
  80.             toolbarWidgetColor: Colors.white,
  81.             initAspectRatio: CropAspectRatioPreset.square,
  82.             lockAspectRatio: false,
  83.           ),
  84.           IOSUiSettings(
  85.             minimumAspectRatio: 1.0,
  86.             aspectRatioLockEnabled: false
  87.           ),
  88.         ]
  89.       );
  90.       // 如果裁剪成功
  91.       if (file != null && onChanged != null) {
  92.         // 图片裁剪成功，返回裁剪后的图片
  93.         onChanged(file.path);
  94.       }
  95.     } catch (e) {
  96.       // print('裁剪出错: $e');
  97.       if (onChanged != null) { onChanged(''); }
  98.     }
  99.   }
  100. }

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4