Flutter图片选择裁剪压缩插件selectcropcompressimage的使用

Flutter图片选择裁剪压缩插件SelectCropCompressImage的使用

简介

SelectCropCompressImage 是一个非常实用的Flutter插件，它简化了在应用内选择、裁剪和压缩图片的过程，而无需用户离开应用或使用其他第三方工具。该插件允许用户从手机相册中选择图片或通过手机摄像头拍摄新图片，并在应用内对图片进行裁剪和压缩。

功能

• 图片选择：从相册中选择图片或通过摄像头拍摄新图片。
• 图片裁剪：根据用户需求调整图片的尺寸或选择预定义的宽高比。
• 图片压缩：压缩图片以减小文件大小，同时保持较高的图像质量。

截图

入门指南

1. 导入插件

首先，在 pubspec.yaml 文件中添加 selectcropcompressimage 依赖：

dependencies:
  selectcropcompressimage: ^最新版本

然后运行 flutter pub get 来安装插件。

2. 配置（仅限Android）

对于Android项目，需要在 AndroidManifest.xml 文件中添加以下代码：

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

iOS项目不需要额外配置。

3. 使用插件

创建 SelectCropCompressImage 类的实例，并调用 selectCropCompressImageFromGallery 或 selectCropCompressImageFromCamera 方法来选择、裁剪和压缩图片。

必填参数

• compressionAmount：压缩程度，范围为0到100。值越大，压缩越小，图片质量越高。
• context：构建上下文，用于匹配图片裁剪界面的主题颜色。

可选参数

• aspectRatioX：裁剪时的X轴宽高比，默认为1。
• aspectRatioY：裁剪时的Y轴宽高比，默认为1。

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 SelectCropCompressImage 插件来选择、裁剪和压缩图片。

import 'package:flutter/material.dart';
import 'package:selectcropcompressimage/selectcropcompressimage.dart';

void main() {
  runApp(const SelectCropCompressImageExampleApp());
}

class SelectCropCompressImageExampleApp extends StatelessWidget {
  const SelectCropCompressImageExampleApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SelectCropCompressImageScreen(),
    );
  }
}

class SelectCropCompressImageScreen extends StatelessWidget {
  const SelectCropCompressImageScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text("SelectCropCompressImage"),
        centerTitle: true,
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                // 创建SelectCropCompressImage实例
                SelectCropCompressImage selectCropCompressImage = SelectCropCompressImage();
                
                // 从相册中选择、裁剪并压缩图片
                Uint8List? selectedCroppedAndCompressImage = await selectCropCompressImage.selectCropCompressImageFromGallery(
                  compressionAmount: 30, // 压缩程度为30
                  context: context,     // 构建上下文
                  title: "SelectCropCompressApp", // 标题
                );
                
                // 如果图片不为空，则可以对其进行处理
                if (selectedCroppedAndCompressImage != null) {
                  // 处理图片，例如显示或上传
                  print("图片已成功选择、裁剪并压缩");
                } else {
                  // 用户取消操作
                  print("用户取消了图片选择");
                }
              },
              child: const Text("从相册选择图片"),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                // 创建SelectCropCompressImage实例
                SelectCropCompressImage selectCropCompressImage = SelectCropCompressImage();
                
                // 通过摄像头拍摄、裁剪并压缩图片
                Uint8List? selectedCroppedAndCompressImage = await selectCropCompressImage.selectCropCompressImageFromCamera(
                  compressionAmount: 30, // 压缩程度为30
                  context: context,     // 构建上下文
                  title: "SelectCropCompressApp", // 标题
                );
                
                // 如果图片不为空，则可以对其进行处理
                if (selectedCroppedAndCompressImage != null) {
                  // 处理图片，例如显示或上传
                  print("图片已成功拍摄、裁剪并压缩");
                } else {
                  // 用户取消操作
                  print("用户取消了图片拍摄");
                }
              },
              child: const Text("拍摄照片"),
            ),
          ],
        ),
      ),
    );
  }
}