Flutter图片裁剪插件simple_image_crop的使用

在Flutter中，simple_image_crop 是一个简单易用的插件，用于在iOS和Android平台上对图片进行裁剪。它支持圆形和矩形两种裁剪区域，并且可以调整裁剪后的图片质量和大小。

安装

首先，在项目的 pubspec.yaml 文件中添加 simple_image_crop 插件作为依赖项：

dependencies:
  simple_image_crop: ^0.2.0

然后运行以下命令以安装依赖：

flutter pub get

使用

创建一个加载和编辑图片的小部件

我们可以通过 ImgCrop 小部件来加载和编辑图片。图片可以来自任何类型，例如文件路径或资产资源。

final cropKey = GlobalKey<ImgCropState>();

Widget _buildCropImage() {
  return Container(
    color: Colors.black,
    child: ImgCrop(
      key: cropKey,
      chipRadius: 150,  // 裁剪区域的半径
      chipShape: 'circle', // 裁剪类型为 "circle" 或 "rect"
      image: FileImage(imageFile), // 你选择的图片文件
    ),
  );
}

生成裁剪后的图片

通过调用 cropCompleted 方法，可以获取裁剪后的图片文件。这是一个异步函数，返回裁剪后的图片文件。

final croppedFile = await crop.cropCompleted(
  croppedImage,
  {pictureQuality: 900} // 控制图片的大小和质量
);

完整的示例代码如下：

import 'dart:io';
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:simple_image_crop/simple_image_crop.dart';

enum _sheetType { gallery, camera }

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: "/",
      routes: {
        "crop_page": (context) => SimpleCropRoute(),
        "/": (context) => MyHomeRoute()
      },
    );
  }
}

class MyHomeRoute extends StatefulWidget {
  [@override](/user/override)
  _MyHomeRouteState createState() => new _MyHomeRouteState();
}

class _MyHomeRouteState extends State<MyHomeRoute> {
  final cropKey = GlobalKey<ImgCropState>();

  Future getImage(type) async {
    var image = await ImagePicker.pickImage(
        source: type == _sheetType.gallery
            ? ImageSource.gallery
            : ImageSource.camera);
    if (image == null) return;
    Navigator.of(context).pop();
    Navigator.of(context).pushNamed('crop_page', arguments: {'image': image});
  }

  void _showActionSheet() {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return SafeArea(
            child: Column(
              mainAxisSize: MainAxisSize.min, // 设置最小的弹出
              children: <Widget>[
                new ListTile(
                  leading: new Icon(Icons.photo_camera),
                  title: new Text("相机拍照"),
                  onTap: () async {
                    getImage(_sheetType.camera);
                  },
                ),
                new ListTile(
                  leading: new Icon(Icons.photo_library),
                  title: new Text("相册选择"),
                  onTap: () async {
                    getImage(_sheetType.gallery);
                  },
                ),
              ],
            ),
          );
        });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('选择图片'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _showActionSheet,
        tooltip: '增加',
        child: Icon(Icons.add),
      ),
    );
  }
}

class SimpleCropRoute extends StatefulWidget {
  [@override](/user/override)
  _SimpleCropRouteState createState() => _SimpleCropRouteState();
}

class _SimpleCropRouteState extends State<SimpleCropRoute> {
  final cropKey = GlobalKey<ImgCropState>();

  Future<void> showImage(BuildContext context, File file) async {
    new FileImage(file)
        .resolve(new ImageConfiguration())
        .addListener(ImageStreamListener((ImageInfo info, bool _) {
      print('-------------------------------------------$info');
    }));
    return showDialog<void>(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
              title: Text(
                '当前截图：',
                style: TextStyle(
                    fontFamily: 'Roboto',
                    fontWeight: FontWeight.w300,
                    color: Theme.of(context).primaryColor,
                    letterSpacing: 1.1),
              ),
              content: Image.file(file));
        });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final Map args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: Text(
            '缩放与裁剪',
            style: TextStyle(color: Colors.black),
          ),
          backgroundColor: Colors.white,
          leading: new IconButton(
            icon:
                new Icon(Icons.navigate_before, color: Colors.black, size: 40),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ),
        body: Center(
          child: ImgCrop(
            key: cropKey,
            chipRadius: 100,
            chipShape: ChipShape.rect,
            chipRatio: 2 / 1,
            maximumScale: 3,
            image: FileImage(args['image']),
            // handleSize: 0.0,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            final crop = cropKey.currentState;
            final croppedFile =
                await crop.cropCompleted(args['image'], preferredSize: 1000);
            showImage(context, croppedFile);
          },
          tooltip: '增加',
          child: Text('裁剪'),
        ));
  }
}