Flutter图像处理插件image_crafter的使用

Flutter图像处理插件image_crafter的使用

简介

image_crafter 是一个Dart包，提供了用于选择、裁剪和处理图像的实用函数，并包含了一个在Flutter应用中的示例用法。该插件支持Android和iOS平台，允许用户从图库中选择图片或通过相机拍摄图片，并对图片进行裁剪和压缩。

功能

• 从图库中选择图片或通过相机拍摄图片。
• 将选定的图片裁剪为所需的纵横比。
• 在保持质量的同时处理和压缩图片。

示例代码

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

import 'dart:io';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  File? _image;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _image != null ? Colors.black12 : null,
      appBar: AppBar(
        title: const Text("Select Image and Crop"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示选中的图片
            _image == null
                ? const Text("Select Image")
                : CircleAvatar(
                    radius: 100, // 调整头像的半径
                    backgroundColor: Colors.grey, // 头像背景颜色
                    child: ClipOval(
                      child: Image.file(
                        _image!,
                        height: 300.0,
                        width: 300.0,
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
            const SizedBox(height: 20.0),

            // 从图库选择图片按钮
            ElevatedButton(
              onPressed: () async {
                File? image = await ImageUtility.imageFromGallery(
                  imageQuality: 60, // 图片质量（0-100）
                  aspectRatioPresetsForAndroid: [CustomAspectRatio.square], // Android平台的纵横比预设
                  aspectRatioPresetsForIos: [CustomAspectRatio.square], // iOS平台的纵横比预设
                  lockAspectRatio: true, // 是否锁定纵横比
                );
                setState(() {
                  _image = image;
                });
                if (kDebugMode) {
                  if (_image != null) {
                    print("Gallery path ${_image!.path}");
                  }
                }
              },
              child: const Text('Pick Image from Gallery'),
            ),
            const SizedBox(height: 30),

            // 从相机拍摄图片按钮
            ElevatedButton(
              onPressed: () async {
                File? image = await ImageUtility.imageFromCamera(
                  imageQuality: 60, // 图片质量（0-100）
                  aspectRatioPresetsForAndroid: [CustomAspectRatio.square], // Android平台的纵横比预设
                  aspectRatioPresetsForIos: [CustomAspectRatio.square], // iOS平台的纵横比预设
                  lockAspectRatio: true, // 是否锁定纵横比
                );
                setState(() {
                  _image = image;
                });
                if (kDebugMode) {
                  if (_image != null) {
                    print("Camera path ${_image!.path}");
                  }
                }
              },
              child: const Text('Pick Image from Camera'),
            ),
          ],
        ),
      ),
    );
  }
}

配置

iOS配置

从版本0.8.1开始，iOS实现使用PHPicker来选择（多个）图片，适用于iOS 14或更高版本。由于实现了PHPicker，在iOS 14+的模拟器上无法选择HEIC格式的图片，这是一个已知问题。请在真实设备上测试，或使用非HEIC格式的图片进行测试。

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

• NSPhotoLibraryUsageDescription：描述应用程序为什么需要访问照片库权限。如果始终将requestFullMetadata设置为false，则不会请求此权限，但App Store政策要求包含此plist条目。
• NSCameraUsageDescription：描述应用程序为什么需要访问相机。

Android配置

在AndroidManifest.xml中添加以下内容：

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

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

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="true" />

确保在build.gradle文件中将compileSdkVersion设置为33：

android {
  compileSdkVersion 33
  ...
}

使用说明

• 检查权限状态：

var permissionStatus = await ImageUtility.checkPermission();
if (permissionStatus) {
  // 权限已授予
} else {
  // 导航到设置页面
}

• 从图库选择图片：

File? image = await ImageUtility.imageFromGallery(imageQuality: 60);

• 从相机拍摄图片：

File? image = await ImageUtility.imageFromCamera(imageQuality: 60);