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

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

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

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

最佳答案

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

1. 您将需要以这样一种方式加载图像，即您可以将其绘制到 Canvas 上或使用 RawImage 来绘制它，而不是直接使用 Image 小部件。
2. 您需要找出相对于图像的坐标系
3. 您需要找到一种绘制 crop 指示器的方法 - 您可以通过直接在 Canvas 上绘制或可能使用 GestureDetector/Draggable/DropTarget 的某种组合来完成此操作。我建议坚持使用 Canvas 可能是最容易开始的。
4. 一旦用户选择了图像的一部分，您需要将屏幕坐标转换为图片坐标。
5. 然后，您必须创建一个屏幕外 Canvas 来绘制裁剪后的图像。您必须进行各种转换，以确保图像最终出现在正确的位置。
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;

在 Canvas 上显示图像:

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

将图像写入离屏 Canvas :

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

https://stackoverflow.com/questions/50989513/