crop_your_image

一个 Flutter 插件，提供 Crop Widget 用于裁剪图像。

crop_your_image 只提供最少的 UI 来决定图像内的裁剪区域。其他 UI 部分，例如“裁剪”按钮或“更改宽高比”按钮，需要由每个应用开发者自行准备。

此策略可帮助应用程序开发人员使用自己品牌的样式来构建“裁剪页面”。为了控制裁剪图像的操作，您可以从任何小部件中使用 CropController。

cropyourimage

特点

  • 最低 UI 限制.
  • 灵活的 Crop 小部件，可以放置在您的任何小部件树的任何位置。
  • CropController 用于控制裁剪操作。
  • 支持 **矩形** 和 **圆形** 裁剪
  • 固定 **宽高比**。
  • 以编程方式设置裁剪区域的矩形。

请注意，此软件包不

  • 从任何存储（例如图库、互联网等）读取/下载图像数据。
  • 进行resize、tilt 或其他可以使用 image 包直接完成的转换。
  • 提供裁剪编辑器以外的 UI 部分，例如“裁剪”按钮、“预览”按钮或“更改宽高比”菜单。构建 UI 完全由您决定！

笔记

请注意，此软件包仍处于开发的早期阶段。我一直在等待您的 反馈 和 Pull Requests，以使 crop_your_image 更加便捷和有用，并且错误更少。

用法

基础

将Crop小部件放置在您想要放置图像裁剪UI的任何位置。

final _controller = CropController();

Widget build(BuildContext context) {
  return Crop(
    image: _imageData,
    controller: _controller,
    onCropped: (image) {
      // do something with image data 
    }
  );
}

然后，Crop 小部件将使用提供的图像自动在用户屏幕上显示裁剪编辑器 UI。

通过创建 CropController 实例并将其传递给 Crop 的 controller 属性，您可以从自己设计的小部件控制 Crop 小部件。

例如，当您想使用当前选定的裁剪区域裁剪图像时，您只需在任何地方调用 _controller.crop()，就像下面的代码一样。

ElevatedButton(
  child: Text('Crop it!')
  onPressed: _cropController.crop,
),

因为 _controller.crop() 仅触发裁剪过程，所以此方法会立即返回，不带任何裁剪后的图像数据。您始终可以通过 Crop 小部件的 onCropped 回调来获取裁剪图像的结果。

高级

Crop 的所有属性及其用法如下。

final _controller = CropController();

Widget build(BuildContext context) {
  return Crop(
    image: _imageData,
    controller: _controller,
    onCropped: (image) {
      // do something with image data 
    },
    aspectRatio: 4 / 3,
    initialSize: 0.5,
    // initialArea: Rect.fromLTWH(240, 212, 800, 600),
    // withCircleUi: true,
    baseColor: Colors.blue.shade900,
    maskColor: Colors.white.withAlpha(100),
    onMoved: (newRect) {
      // do something with current cropping area.
    }
    cornerDotBuilder: (size, cornerIndex) => const DotControl(color: Colors.blue),
  );
}
  • image是UInt8List类型的图像数据，裁剪结果可以通过onCropped回调获得。
  • aspectRatio是裁剪区域的纵横比。如果想以任意纵横比裁剪图像，请设置为null或省略。
  • aspectRatio可以通过CropController.aspectRatio的setter动态更改（如下所示）。
  • initialSize 是裁剪区域的初始大小。1.0（或默认的 null）适合图像大小，这意味着裁剪区域尽可能地扩展。0.5 将是它的一半。当通过 CropController.aspectRatio 更改 aspectRatio 时，也会参考此值。
  • initialArea 是基于实际图像数据的裁剪区域的初始 Rect。
  • withCircleUi 标志用于决定裁剪 UI 的形状。如果为 true，则 aspectRatio 自动设置为 1.0，并且裁剪 UI 的形状将为圆形。请注意，此标志不会影响裁剪图像的结果。如果您想要圆形裁剪的图像，请调用 CropController.cropCircle 而不是 CropController.crop。
  • baseColor 是放置在裁剪编辑器上方的遮罩小部件的颜色。
  • maskColor 是裁剪编辑器的基本颜色的颜色。
  • onMoved 回调在裁剪区域移动时被调用，无论原因如何。参数的 newRect 是裁剪区域的当前 Rect。
  • cornerDotBuilder 是用于构建放置在角落的小部件的构建器。构建器传递小部件必须遵循的 size 和表示位置的 cornerIndex：0：左上角，1：右上角，2：左下角，3：右下角。

此外，image、aspectRatio、withCircleUi、rect 和 area 也可以通过 CropController 更改，而其他属性，例如 baseColor、maskColor 和 cornerDotBuilder，可以通过 setState 更改。

GitHub

https://github.com/chooyan-eng/crop_your_image