Flutter图片裁剪插件image_cropper_view_overlay的使用

原始包详情

原始包: image_cropper_view
原始GitHub仓库: gliheng/image_cropper_view
原始仓库作者: gliheng
许可证: MIT许可证

图片叠加功能修改

我对这个包进行了增强，引入了一个新功能：在裁剪区域添加图片叠加。这一修改使用户能够将另一张图像叠加到裁剪图像上，提供了额外的定制和创意可能性。

通过这一改进，overlayImage参数被引入到cropImage函数中。通过指定所需的叠加图像，开发者可以无缝地将叠加层整合到他们的裁剪图像中。例如，你可以在裁剪图像上叠加贴纸、徽标或装饰元素，从而增强其视觉吸引力和功能性。

这一改进扩展了该包的多功能性，使开发者能够在他们的应用程序中创建更加沉浸式和定制化的用户体验。

没有叠加效果

裁剪效果

带有叠加效果

带叠加效果

功能

支持平移、缩放、旋转手势来定位您的图像
在桌面端使用时，鼠标滚轮用于缩放，Ctrl+鼠标滚轮用于旋转
只包含Dart代码，无原生依赖
可配置的控制按钮
支持设置裁剪形状为圆形、矩形或圆角矩形

开始使用

要开始使用My Image Cropper View，请将其集成到你的应用中作为一个新的路由，以实现无缝高效的图像裁剪。

使用方法

按照以下步骤集成包：

// My Image Cropper View的示例用法
Uint8List? result = await ImageCropperViewOverlay.cropImage(
  context: context,
  image: Image.file(imageFile),
  clipShape: ClipShape.circle,
  overlayImage: Image.asset("assets/smile.png"), // 可选叠加属性
);

nodeper 1楼•2 个月前

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

image_cropper_view_overlay 是一个用于 Flutter 的图片裁剪插件，它允许用户在应用中裁剪图片。与 image_cropper 插件类似，image_cropper_view_overlay 提供了更多的自定义选项，特别是可以在裁剪时添加覆盖层（overlay）。

安装

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

dependencies:
  flutter:
    sdk: flutter
  image_cropper_view_overlay: ^1.0.0  # 请检查最新版本

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

基本使用

以下是一个简单的示例，展示如何使用 image_cropper_view_overlay 插件来裁剪图片：

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

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

class _ImageCropperExampleState extends State<ImageCropperExample> {
  File? _imageFile;

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

    if (pickedFile != null) {
      final croppedFile = await ImageCropper.cropImage(
        sourcePath: pickedFile.path,
        aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1), // 1:1 比例裁剪
        compressQuality: 100,
        maxWidth: 800,
        maxHeight: 800,
        overlayWidget: Container(
          color: Colors.black.withOpacity(0.5),
          child: Center(
            child: Text(
              'Crop Image',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
      );

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Cropper Example'),
      ),
      body: Center(
        child: _imageFile == null
            ? Text('No image selected.')
            : Image.file(_imageFile!),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _pickImage,
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: ImageCropperExample(),
));