Flutter图片自定义裁剪插件flutter_customizable_image_croppper的使用

Flutter 图片自定义裁剪插件 flutter_customizable_image_croppper 的使用

为什么使用这个插件？

  • 裁剪小部件的形状不是固定的，你可以根据需要自定义形状。
  • 这允许你以任何方式在任何位置裁剪图片。

特性

  • 它帮助你按自己的意愿裁剪图片。
  • 支持多种图片类型。

使用方法

首先创建一个示例的 CropController。

CropController cropController =  CropController(
  imageType: ImageType.url,
  image: "https://picsum.photos/id/234/200/200",
);

然后在 CustomizableImageCropper 小部件的属性中设置刚刚创建的控制器。

CustomizableImageCropper(controller: cropController),

接下来，在你希望点击或触摸的事件方法中调用 crop() 方法。

ElevatedButton(
  child: Text("保存"),
  onPressed: () async {
    await cropController.crop();
  },
),

最后，在 cropController 的 cropedImageFile 属性中找到裁剪后的图片。

ElevatedButton(
  child: Text("保存"),
  onPressed: () async {
    await cropController.crop();
    print(cropController.cropedImageFile);
  },
),

完整示例代码

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

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Material App',
      home: MyComp(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  [@override](/user/override)
  State<MyComp> createState() => _MyCompState();
}

class _MyCompState extends State<MyComp> {
  late CropController cropController;
  late dynamic myImage;

  [@override](/user/override)
  void initState() {
    cropController = CropController(
      imageType: ImageType.url,
      image: "https://picsum.photos/id/234/200/200",
    );
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("照片查看器"),
      ),
      body: Center(
        child: Column(
          children: [
            CustomizableImageCropper(
              controller: cropController,
            ),
            ElevatedButton(
              child: Text(cropController.isCroped ? "取消" : "保存"),
              onPressed: () async {
                await cropController.crop();
                print(cropController.cropedImageFile);
                setState(() {});
              },
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter图片自定义裁剪插件flutter_customizable_image_croppper的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片自定义裁剪插件flutter_customizable_image_croppper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_customizable_image_cropper 是一个用于在 Flutter 应用中进行图片自定义裁剪的插件。它允许用户通过手势缩放、旋转和拖动来裁剪图片，并且可以根据需求自定义裁剪框的形状、大小和比例。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_customizable_image_cropper 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_customizable_image_cropper: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本使用

以下是一个简单的示例，展示了如何使用 flutter_customizable_image_cropper 插件进行图片裁剪。

import 'package:flutter/material.dart';
import 'package:flutter_customizable_image_cropper/flutter_customizable_image_cropper.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageCropperScreen(),
    );
  }
}

class ImageCropperScreen extends StatefulWidget {
  @override
  _ImageCropperScreenState createState() => _ImageCropperScreenState();
}

class _ImageCropperScreenState extends State<ImageCropperScreen> {
  File? _imageFile;

  Future<void> _pickImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      setState(() {
        _imageFile = File(pickedFile.path);
      });
    }
  }

  Future<void> _cropImage() async {
    if (_imageFile == null) return;

    final croppedFile = await FlutterCustomizableImageCropper.cropImage(
      imageFile: _imageFile!,
      cropStyle: CropStyle.rectangle, // 裁剪框形状
      aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1), // 裁剪框比例
      maxSize: Size(500, 500), // 最大裁剪尺寸
    );

    if (croppedFile != null) {
      // 处理裁剪后的图片
      setState(() {
        _imageFile = File(croppedFile.path);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Cropper Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (_imageFile != null)
              Image.file(
                _imageFile!,
                width: 200,
                height: 200,
                fit: BoxFit.cover,
              ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _cropImage,
              child: Text('Crop Image'),
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

  • imageFile: 需要裁剪的图片文件。
  • cropStyle: 裁剪框的形状，可以是 CropStyle.rectangle（矩形）或 CropStyle.circle（圆形）。
  • aspectRatio: 裁剪框的宽高比，例如 CropAspectRatio(ratioX: 1, ratioY: 1) 表示 1:1 的正方形。
  • maxSize: 裁剪后的图片的最大尺寸。

高级用法

你可以进一步自定义裁剪框的颜色、边框宽度等属性。例如：

final croppedFile = await FlutterCustomizableImageCropper.cropImage(
  imageFile: _imageFile!,
  cropStyle: CropStyle.rectangle,
  aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1),
  maxSize: Size(500, 500),
  cropBoxColor: Colors.white.withOpacity(0.5), // 裁剪框背景颜色
  cropBoxBorderColor: Colors.red, // 裁剪框边框颜色
  cropBoxBorderWidth: 2.0, // 裁剪框边框宽度
);
回到顶部