Flutter图片裁剪插件flutter_image_crop

Flutter 图片裁剪插件 flutter_image_crop_widget 的使用

flutter_image_crop_widget 是一个用 Flutter 实现的图片裁剪组件。它可以支持对图片进行缩放和裁剪。

你可以通过以下链接试用该插件：在线试用

裁切模式

查看模式（仅支持缩放和移动）

完整示例代码

以下是 flutter_image_crop_widget 插件的一个完整示例代码：

import 'dart:io';
import 'dart:typed_data';

import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_image_crop_widget/flutter_image_crop_widget.dart';
import 'package:image/image.dart' as i;

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  ui.Image? originImage;
  bool editMode = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    rootBundle.load('assets/pasted_image.png').then((data) async {
      final imageData = data.buffer.asUint8List();
      final image = await decodeImageFromList(imageData);
      setState(() {
        originImage = image;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
              onPressed: () {
                setState(() {
                  editMode = !editMode;
                });
              },
              icon: editMode ? Icon(Icons.edit) : Icon(Icons.visibility))
        ],
      ),
      body: SizedBox.expand(
        child: originImage == null
            ? Placeholder()
            : editMode
                ? ImageCropWidget.justView(
                    originImage!,
                  )
                : ImageCropWidget.editMode(
                    originImage!,
                    cropRatio: 2,
                    cropAreaMinSize: 100,
                    onUpdate: (originImage, rectInImage) async {
                      // 这里获取到原图片和裁剪区域
                      // ui.PictureRecorder recorder = ui.PictureRecorder();
                      // final canvas = Canvas(recorder);
                      // canvas.drawImageRect(
                      //     originImage,
                      //     rectInImage,
                      //     Rect.fromLTWH(
                      //         0, 0, rectInImage.width, rectInImage.height),
                      //     Paint());
                      // final p = recorder.endRecording();
                      // final image = await p.toImage(rectInImage.width.toInt(),
                      //     rectInImage.height.toInt());
                      // final f = File('./hello.jpg');
                      // final png = i.PngEncoder().encodeImage(i.Image.fromBytes(image.width, image.height,(await image.toByteData())!.buffer.asUint8List()));
                      // print('path: ${f.absolute}');
                      // f.writeAsBytes(png);
                    },
                  ),
      ),
    );
  }
}

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

sinazl 1楼

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

flutter_image_crop_widget 是一个用于在 Flutter 应用中裁剪图片的插件。它提供了一个简单易用的界面，允许用户选择图片并进行裁剪。以下是使用 flutter_image_crop_widget 的基本步骤：

1. 添加依赖

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

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

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

2. 导入包

在你的 Dart 文件中导入 flutter_image_crop_widget：

import 'package:flutter_image_crop_widget/flutter_image_crop_widget.dart';

3. 使用 `ImageCropWidget`

ImageCropWidget 是一个用于裁剪图片的小部件。你可以通过以下方式使用它：

class ImageCropPage extends StatefulWidget {
  @override
  _ImageCropPageState createState() => _ImageCropPageState();
}

class _ImageCropPageState extends State<ImageCropPage> {
  final ImageCropController _controller = ImageCropController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Crop'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ImageCropWidget(
              controller: _controller,
              image: AssetImage('assets/sample_image.jpg'), // 替换为你的图片路径
            ),
          ),
          ElevatedButton(
            onPressed: () async {
              final croppedImage = await _controller.crop();
              // 处理裁剪后的图片
              if (croppedImage != null) {
                // 例如：显示裁剪后的图片
                showDialog(
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                      content: Image.memory(croppedImage),
                    );
                  },
                );
              }
            },
            child: Text('Crop Image'),
          ),
        ],
      ),
    );
  }
}

4. 处理裁剪后的图片

在上面的代码中，_controller.crop() 方法返回一个 Uint8List，表示裁剪后的图片的字节数据。你可以将这些字节数据保存到文件、上传到服务器或直接在应用中显示。

5. 其他配置

ImageCropWidget 还支持一些其他的配置选项，例如设置裁剪框的宽高比、初始裁剪区域等。你可以通过 ImageCropController 进行更多的控制。

_controller.setAspectRatio(1.0); // 设置裁剪框的宽高比为1:1
_controller.setCropRect(Rect.fromLTWH(0, 0, 100, 100)); // 设置初始裁剪区域

Flutter图片裁剪插件flutter_image_crop_widget的使用