Flutter图片裁剪插件simple_image_cropper的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter图片裁剪插件simple_image_cropper的使用

简介

simple_image_cropper 是一个用于在Flutter应用程序中裁剪图片的插件。它允许用户通过选择区域来裁剪图片，并提供了多种自定义选项，以满足不同的需求。

图片示例

Demo

安装

要使用此插件，您需要在 pubspec.yaml 文件中添加 simple_image_cropper 作为依赖项：

dependencies:
  simple_image_cropper: ^latest_version

请将 ^latest_version 替换为最新版本号。

必填参数

  • image: 需要裁剪的图片。
  • width: 该组件的宽度。
  • height: 该组件的高度。

自定义选项

属性 描述 类型
outerRectColor 外部矩形的颜色，默认为白色。 Color
innerRectColor 内部矩形的颜色，默认为红色。 Color
outerRectStrokeWidth 外部矩形的边框宽度，默认为1.0。 double
innerRectStrokeWidth 内部矩形的边框宽度，默认为3.0。 double
tlConerBgColor 取消按钮的背景颜色，默认为白色。 Color
tlCornerFontColor 取消按钮的字体颜色，默认为灰色。 Color
brCornerBgColor 调整大小按钮的背景颜色，默认为蓝色。 Color
brCornerFontColor 调整大小按钮的字体颜色，默认为白色。 Color

示例代码

以下是一个完整的示例代码，展示了如何使用 simple_image_cropper 插件来裁剪图片：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Cropper Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Demo(),
    );
  }
}

class Demo extends StatefulWidget {
  Demo({Key? key}) : super(key: key);

  [@override](/user/override)
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  late ImageProvider _image;
  final GlobalKey<SimpleImageCropperState> cropKey = GlobalKey();

  [@override](/user/override)
  void initState() {
    // 初始化图片资源
    _image = AssetImage('assets/images/demo.jpg');
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size; // 获取屏幕尺寸

    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.crop), // 裁剪按钮图标
        onPressed: () async {
          // 调用裁剪功能
          Image? image = await cropKey.currentState?.cropImage();
          if (image != null) {
            setState(() {
              _image = image.image; // 更新裁剪后的图片
            });
          }
        },
      ),
      body: Container(
        height: size.height, // 设置容器高度为屏幕高度
        width: size.width,   // 设置容器宽度为屏幕宽度
        child: SimpleImageCropper(
          key: cropKey,      // 传递全局键
          height: size.height, // 设置裁剪器高度
          width: size.width,   // 设置裁剪器宽度
          image: _image,     // 传递图片资源
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用simple_image_cropper插件进行图片裁剪的示例代码。这个插件允许你从设备图库或相机中选择图片，并进行裁剪。

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

dependencies:
  flutter:
    sdk: flutter
  simple_image_cropper: ^2.6.2  # 请确保使用最新版本

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

接下来，在你的Flutter项目中，你可以使用以下代码来实现图片选择和裁剪功能：

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

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;
  CropperController? _cropperController;

  @override
  void initState() {
    super.initState();
    _cropperController = CropperController();
  }

  Future<void> _pickImage() async {
    final ImagePicker _picker = ImagePicker();
    final PickedFile? pickedFile = await _picker.pickImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      final File imageFile = File(pickedFile.path);
      bool result = await SimpleImageCropper.cropImage(
        sourcePath: imageFile.absolute.path,
        cropperController: _cropperController!,
        maxWidth: 1080,
        maxHeight: 1080,
        aspectRatioPresets: Platform.isAndroid
            ? [
                CropAspectRatioPreset.square,
                CropAspectRatioPreset.ratio3x2,
                CropAspectRatioPreset.original,
                CropAspectRatioPreset.ratio4x3,
                CropAspectRatioPreset.ratio16x9
              ]
            : [
                CropAspectRatioPreset.square,
                CropAspectRatioPreset.ratio3x2,
                CropAspectRatioPreset.original,
                CropAspectRatioPreset.ratio4x3
              ],
        androidUiSettings: AndroidUiSettings(
          toolbarTitle: 'Cropper',
          toolbarColor: Colors.deepOrange,
          toolbarWidgetColor: Colors.white,
          initAspectRatio: CropAspectRatioPreset.original,
          lockAspectRatio: false,
        ),
        iosUiSettings: IOSUiSettings(
          minimumAspectRatio: 1.0,
        ),
      );

      if (result != null) {
        setState(() {
          _imageFile = File(result);
        });
      }
    }
  }

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

注意事项

  1. 权限：

    • 在Android上，你需要在AndroidManifest.xml中添加读写外部存储的权限。
    • 在iOS上，你需要在Info.plist中添加对相册和相机的访问权限。

  2. 依赖：

    • simple_image_cropper依赖于image_picker插件来选择图片，因此你需要确保两者都安装并正确配置。

  3. UI定制：

    • 你可以根据需要调整androidUiSettings和iosUiSettings来自定义裁剪器的UI。

这样，你就可以在你的Flutter应用中实现图片选择和裁剪功能了。

回到顶部