如何在 Flutter 中裁剪图像？

Question

我为这个问题搜索了几天。

我想像这样在颤抖中裁剪图像：

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

此解决方案最接近的库是 Image Lib，该库提供操作图像和裁剪，但我想像这个 gif 那样在 UI 级别裁剪图像。我发现的所有库都没有提供。

Answer 1

没有小部件可以为您执行所有这些操作。但是，我相信现在可以在 Flutter 中原生地编写它。在这个特殊的时刻我没有时间为你做这件事，但我绝对可以为你指明正确的方向。

1. 您需要以这样一种方式加载图像，即您可以将其绘制到画布上或使用RawImage 进行绘制，而不是直接使用图像小部件。
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

Answer 2

image_cropper 插件完全符合您的要求。