如何在Flutter中裁剪图像？

Question

我为这个问题搜索了很多天。

我想在flutter中实现像这样裁剪图片:

GIF来源：https://github.com/ArthurHub/Android-Image-Cropper

最接近此解决方案的库是Image库，该库提供操作图像和裁剪，但我希望像这个gif一样在UI层面上裁剪图像。我发现的所有库都没有提供此功能。

- Eduardo Yamauchi

---

关于 https://pub.dartlang.org/packages/flutter_image_pick_crop 呢？ - Bostrot

可能是 如何在Flutter中从图像选择器中裁剪图像？ 的重复问题。 - Günter Zöchbauer

Answer 1

没有一个小部件可以为您执行所有操作。但是，我相信现在可以原生地在flutter中编写它。我现在没有时间为您完成，但我绝对可以指出正确的方向。

1. 您需要以这样一种方式加载图像，以便可以将其绘制到画布上，或者使用 RawImage 将其绘制，而不是直接使用 Image 小部件。
2. 您需要找出与图像相关的坐标系
3. 您需要找到一种方法来绘制 crop 指示器-您可以通过直接在画布上绘制或可能使用 GestureDetector/Draggable/DropTarget 的某种组合来实现此目的。我建议从Canvas开始可能是最容易的。
4. 用户选择图像的一部分后，您需要将屏幕坐标转换为图片坐标。
5. 然后，您必须创建一个离屏画布，以将裁剪后的图像绘制到其中。您将不得不进行各种变换，以确保图像最终出现在正确的位置。
6. 制作离屏裁剪后，您将不得不显示新图像。

所有这些都是相当大量的工作，可能需要很多精细调整才能做到正确无误。

以下是几个步骤的示例，但您需要想办法将它们组合起来。

加载图像：

var byteData = await rootBundle.load("assets/image.jpg");
Uint8List lst = new Uint8List.view(byteData.buffer);
var codec = await UI.instantiateImageCodec(lst);
var nextFrame = await codec.getNextFrame();
var image = frameInfo.image;

在画布上显示图像：

• https://docs.flutter.io/flutter/dart-ui/Canvas/drawImageRect.html
• https://docs.flutter.io/flutter/rendering/CustomPainter-class.html

将图像写入离屏画布：

ui.Image getCroppedImage(Image image, Rect src, Rect dst) {
  var pictureRecorder = new ui.PictureRecorder();
  Canvas canvas = new Canvas(pictureRecorder);
  canvas.drawImageRect(image, src, dst, Paint());
  return pictureRecorder.endRecording().toImage(dst.width.floor(), dst.height.floor());
}

你可能需要做类似于this answer的事情来获取鼠标/触摸手势的本地坐标。

一些建议-开始尽可能简单，不考虑性能（即如果需要，每次绘制所有内容等）。然后，一旦您掌握了基础知识，就可以开始考虑优化（即使用RawImage、Transform和Stack来处理图像，并仅重新绘制选择器等）。

如果您需要任何其他帮助，请在评论中让我知道，我会尽力回答。现在我已经写了一些关于这个问题的东西，它让我稍微有点好奇想要尝试实现它，但可能不会很快，因为我现在时间很少。祝你好运=D

- rmtmckenzie

---

顺便说一句，如果你最终实现了这个功能，我会非常有兴趣看到最终结果的 =) - rmtmckenzie

Answer 2

image_cropper 插件可以完美地实现您所需要的功能。

- Mans