Flutter图片裁剪插件image_crop2的使用

Flutter图片裁剪插件image_crop2的使用

简介

image_crop2 是一个用于在iOS和Android平台上进行图片裁剪的Flutter插件。该插件通过提供一个Crop小部件来实现图片裁剪功能，并且支持自定义裁剪体验。

安装

在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  image_crop2: ^latest_version

运行以下命令以更新依赖项：

flutter pub get

使用方法

1. 初始化并加载图片

首先创建一个用于加载和编辑图片的小部件。Crop小部件用于渲染图片、覆盖层和句柄以供裁剪。

final cropKey = GlobalKey<CropState>();

Widget _buildCropImage() {
  return Container(
    color: Colors.black,
    padding: const EdgeInsets.all(20.0),
    child: Crop(
      key: cropKey,
      image: Image.file(imageFile), // 替换为实际的图片文件
      aspectRatio: 4.0 / 3.0, // 设置裁剪比例
    ),
  );
}

2. 访问裁剪参数

裁剪完成后，可以通过Crop小部件的状态访问裁剪的参数，例如缩放比例和裁剪区域。

final crop = cropKey.currentState;
final scale = crop.scale; // 缩放比例
final area = crop.area;   // 裁剪区域

if (area == null) {
  // 如果裁剪区域为空，表示裁剪尚未完成
} else {
  // 使用裁剪参数进行后续操作
}

3. 请求权限

在加载图片之前，确保请求访问相册的权限。

final permissionsGranted = await ImageCrop.requestPermissions();

4. 获取图片选项

可以高效地读取图片的宽度和高度，而无需将图片加载到内存中。

final options = await getImageOptions(file: file);
debugPrint('image width: ${options.width}, height: ${options.height}');

5. 图片采样

如果图片较大，可以使用采样功能以降低内存占用。

final sampleFile = await ImageCrop.sampleImage(
    file: originalFile,
    preferredWidth: 1024,
    preferredHeight: 4096,
);

6. 执行裁剪

使用采样的图片并结合裁剪区域执行裁剪操作。

final sampledFile = await ImageCrop.sampleImage(
    file: originalFile,
    preferredWidth: (1024 / crop.scale).round(),
    preferredHeight: (4096 / crop.scale).round(),
);

final croppedFile = await ImageCrop.cropImage(
    file: sampledFile,
    area: crop.area,
);

完整示例代码

以下是完整的示例代码，展示了如何使用image_crop2插件进行图片裁剪。

import 'dart:io';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_crop/image_crop2.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path_provider/path_provider.dart';

void main() async {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.dark,
    statusBarIconBrightness: Brightness.light,
    systemNavigationBarIconBrightness: Brightness.light,
  ));

  WidgetsFlutterBinding.ensureInitialized();

  final dir = await getTemporaryDirectory();
  runApp(MyApp('${dir.path}/crop-result.png'));
}

class MyApp extends StatelessWidget {
  final String destPath;

  const MyApp(this.destPath, {super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          padding: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 20.0),
          child: Center(child: _Screen(destPath)),
        ),
      ),
    );
  }
}

class _Screen extends StatefulWidget {
  final String destPath;

  const _Screen(this.destPath);

  [@override](/user/override)
  State<StatefulWidget> createState() {
    return _ScreenState();
  }
}

class _ScreenState extends State<_Screen> {
  CropController? _ctrl;
  bool _showImage = false;
  late Image _dest;

  [@override](/user/override)
  void initState() {
    super.initState();
    _dest = Image.file(File(widget.destPath));
  }

  [@override](/user/override)
  void dispose() {
    _ctrl?.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final ctrl = _ctrl;
    if (ctrl == null) {
      return Center(
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(padding: const EdgeInsets.all(15)),
          onPressed: _pickImage,
          child: const Text('Pick image', style: TextStyle(fontSize: 24)),
        ),
      );
    }

    if (_showImage) {
      const spacer = SizedBox(height: 10);
      return Column(
        children: [
          Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black, width: 5),
            ),
            child: _dest,
          ),
          spacer,
          ElevatedButton(
            onPressed: () {
              setState(() {
                _showImage = false;
              });
            },
            child: const Text('Crop again'),
          ),
          spacer,
          ElevatedButton(
            onPressed: _pickImage,
            child: const Text('Pick image'),
          ),
        ],
      );
    }

    return ImageCropper(ctrl);
  }

  void _pickImage() async {
    final pickedFile = await ImagePicker().pickImage(source: ImageSource.gallery);

    if (!mounted || pickedFile == null) {
      return;
    }

    setState(() {
      final source = FileImage(File(pickedFile.path));
      _ctrl?.dispose();
      _ctrl = CropController(
        imageProvider: source,
        target: const TargetSize(160, 90),
        maximumScale: 4,
        onDone: _onDone,
        onError: _onError,
      );
    });
  }

  void _onDone(ui.Image img) async {
    final byteData = await img.toByteData(format: ui.ImageByteFormat.png);
    await File(widget.destPath).writeAsBytes(byteData!.buffer.asUint8List());

    if (mounted) {
      PaintingBinding.instance.imageCache.clear();
      setState(() {
        _showImage = true;
      });
    }
  }

  void _onError(ImageCropError e) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('Something went wrong:\n$e'),
      showCloseIcon: true,
      duration: const Duration(seconds: 5),
    ));
  }
}