Flutter 图像上传与裁剪

大家好！你们是否渴望将图像上传和裁剪功能无缝集成到 Flutter 应用程序中？不用再四处寻找了。只需几个简单步骤，借助两个包，你将能够优化应用的图像处理能力。让我们开始吧，探索在 Flutter 应用中轻松管理图像的秘诀。

所需包

这个小项目我们只需要两个包：

image_picker ：通过这个包，我们可以将图像上传到应用中，并且可以选择从图库或相机获取图像。
image_cropper ：通过这个包，我们可以对图像进行裁剪，只保留我们需要的部分。

设置

虽然设置这些包很简单，但考虑到不同设备的差异，还是需要谨慎一些。

Image Picker

Android ：只需添加包本身即可正常使用。

iOS ：需要在 ios 文件夹中的 Info.plist 文件中添加以下几行代码：

vbnet 复制代码

<key>NSCameraUsageDescription</key>
<string>This app needs access to your camera in order to upload photos.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs access to your photo library in order to upload photos.</string>

Image Cropper

Android ：需要在 android/app/src/main 文件夹中的 AndroidManifest.xml 文件中添加以下几行代码：

ini 复制代码

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

iOS ：只需添加包本身即可正常使用。

现在，我们已经准备好了，可以开始编写代码了！

代码

我创建了一个简单的 Stateful 页面，用户可以选择从相机或图库上传图像。图像选择后，结果会立即显示在选择按钮上方，提供无缝且直观的体验。

图像上传

当用户按下按钮时，将执行 uploadImage 函数。

按钮

这里有两个分别标有 "从图库选择" 和 "从相机选择" 的按钮。点击每个按钮会触发带有不同参数的 uploadImage 函数。

dart 复制代码

SizedBox(
  width: 180,
  child: FilledButton(
    onPressed: () {
      uploadImage(ImageSource.gallery);
    },
    child: const Text('从图库选择'),
  ),
),
const SizedBox(
  height: 10,
),
SizedBox(
  width: 180,
  child: FilledButton(
    onPressed: () {
      uploadImage(ImageSource.camera);
    },
    child: const Text('从相机选择'),
  ),
),

图像上传函数

这段代码初始化了一个空的 File 变量，并定义了 uploadImage 函数。该函数使用 ImagePicker 包允许用户从图库或相机选择图像。然后将选定图像转换为 File，并相应更新 file 变量。

dart 复制代码

// 初始化文件变量
File? file;

// 图像上传函数
Future uploadImage(ImageSource source) async {
  final image = await ImagePicker().pickImage(
    source: source,
  );
  if (image == null) return;

  // 将图像路径转换为文件
  File imageFile = File(image.path);

  // 更新文件变量为选定图像
  setState(() {
    file = imageFile;
  });
}

用户在图库或相机选项之间选择时，uploadImage 函数会动态接收 ImageSource。

图像选择后，将其转换为 File 类型并赋值给 'file' 变量。通过使用 setState 方法，更新后的图像会立即显示。

图像裁剪

现在，当我们需要优化上传的图像（如裁剪或旋转）时，利用 image_cropper 包的功能来实现。

dart 复制代码

// 图像上传函数
Future uploadImage(ImageSource source) async {
  final image = await ImagePicker().pickImage(
    source: source,
  );
  if (image == null) return;

  // 将图像路径转换为文件
  File imageFile = File(image.path);

  var croppedFile = await cropImage(imageFile);

  // 更新文件变量为裁剪后的图像
  setState(() {
    file = croppedFile;
  });
}

// 使用 image_cropper 包裁剪选定图像的函数
Future<File?> cropImage(File pickedFile) async {
  final croppedFile = await ImageCropper().cropImage(
    sourcePath: pickedFile.path,
    compressFormat: ImageCompressFormat.jpg,
    compressQuality: 100,
    uiSettings: [
      AndroidUiSettings(
        toolbarTitle: '裁剪器',
        initAspectRatio: CropAspectRatioPreset.original,
        lockAspectRatio: false,
      ),
      IOSUiSettings(
        title: '裁剪器',
      ),
    ],
  );

  // 如果裁剪后的图像可用，则返回裁剪后的图像，否则返回原始图像
  if (croppedFile != null) {
    return File(croppedFile.path);
  } else {
    return File(pickedFile.path);
  }
}

结论

恭喜！你已经成功学会了如何在 Flutter 应用程序中实现图像上传和裁剪功能。通过利用 image_picker 和 image_cropper 包的强大功能，你的应用现在具备了无缝的图像处理能力，为用户提供丰富且交互式的体验。

祝你编码愉快！

原文：

dev.to/thanasistra...

github.com/Thanasis-Tr...