Question

我花了几天时间寻找这个问题。

我想像这样裁剪图像：

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

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

Answer 1

没有可为您执行所有操作的小部件。但是，我相信现在可以将本机内容写成扑朔迷离。在这个特定的时刻，我没有时间为您做，但是我绝对可以为您指明正确的方向。

您将需要以一种既可以将其绘制到画布上，也可以使用RawImage来绘制图像的方式来加载图像，而不是直接使用“图像”小部件。
您需要找出相对于图像的坐标系
您将需要找到一种绘制crop指示器的方法-您可以直接在画布上绘制，也可以使用GestureDetector / Draggable / DropTarget的某种组合来进行绘制。我建议坚持“画布”可能是最简单的开始。
用户选择了图像的一部分后，需要将屏幕坐标转换为图片坐标。
然后，您必须创建一个屏幕外画布以将裁剪后的图像绘制到该画布上。您必须进行各种变换，以确保图像最终显示在正确的位置。
完成屏幕外裁剪后，您将不得不显示新图像。

所有这些工作量很大，可能还需要做很多细化工作。

以下是您需要执行的几个步骤的示例，但您必须弄清楚如何将它们组合在一起。

加载图像：

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;

在画布上显示图像：

将图像写到屏幕外的画布上

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插件完全可以满足您的需求。

如何在Flutter中裁剪图像？

2 个答案: