Image 如何在flatter中使用Canvas裁剪png图像并删除其未使用的空间？

此附件来自通过画布本地保存的渲染画布图像。在图像中，我绘制了一个方形框，我想在画布中渲染它，并将其保存在本地，而不需要左右额外的空间。我只想保存方形框并删除PNG图像中不必要的空间。那么，如何做到这一点呢

小部件源代码：

  return CustomPaint(
    painter: PngImageCropper(image: image),
  );

pngimagecrapper代码

  class PngImageCropper extends CustomPainter {
    PngImageCropper({
      this.image,
    });

    ui.Image image;

    @override
    void paint(Canvas canvas, Size size) {
      _drawCanvas(size, canvas);
      _saveCanvas(size);
    }

    Canvas _drawCanvas(Size size, Canvas canvas) {
      final center = Offset(image.width / 2, image.height / 2);

      double drawImageWidth = 0;
      double drawImageHeight = 0;

      Rect rect =
          Rect.fromCircle(center: center, radius: _getCircularRadius(image));
      Path path = Path()..addOval(rect);

      canvas.clipPath(path);
      Paint paint = new Paint();

      canvas.drawImage(
        image,
        Offset(drawImageWidth, drawImageHeight),
        paint,
      );

      return canvas;
    }

    _getCircularRadius(ui.Image image) {
      return image.height > image.width
          ? image.width.toDouble() / 2
          : image.height.toDouble() / 2;
    }

    _saveCanvas(Size size) async {
      var pictureRecorder = ui.PictureRecorder();
      var canvas = Canvas(pictureRecorder);
      var paint = Paint();
      paint.isAntiAlias = true;

      _drawCanvas(size, canvas);

      var pic = pictureRecorder.endRecording();
      ui.Image img = await pic.toImage(image.width, image.height);
      var byteData = await img.toByteData(format: ui.ImageByteFormat.png);
      var buffer = byteData.buffer.asUint8List();

      // var response = await get(imgUrl);
      var documentDirectory = await getApplicationDocumentsDirectory();
      File file = File(join(documentDirectory.path,
          '${DateTime.now().toUtc().toIso8601String()}.png'));
      file.writeAsBytesSync(buffer);

      print(file.path);
    }

    @override
    bool shouldRepaint(CustomPainter oldDelegate) {
      return false;
    }
  }

---

工作源代码回答@pskink

  Future<List<int>> cropRonded(ui.Image image) async {
    var recorder = ui.PictureRecorder();
    var canvas = Canvas(recorder);
    var imageSize = Size(image.width.toDouble(), image.height.toDouble());
    var boundsToCrop = Rect.fromCenter(
        center: imageSize.center(Offset.zero),
        width: imageSize.shortestSide,
        height: imageSize.shortestSide);
    var matrix = Matrix4.translationValues(
            -boundsToCrop.topLeft.dx, -boundsToCrop.topLeft.dy, 0)
        .storage;
    var paint = Paint()
      ..shader = ImageShader(image, TileMode.clamp, TileMode.clamp, matrix);
    var radius = imageSize.shortestSide / 2;
    canvas.drawCircle(Offset(radius, radius), radius, paint);


    ui.Image cropped = await recorder
        .endRecording()
        .toImage(imageSize.shortestSide.toInt(), imageSize.shortestSide.toInt());
    var byteData = await cropped.toByteData(format: ui.ImageByteFormat.png);
    return byteData.buffer.asUint8List();
  }

Future cropRonded（ui.Image）异步{
var recorder=ui.picturererecorder（）；
var画布=画布（记录器）；
var imageSize=Size（image.width.toDouble（），image.height.toDouble（））；
var boundsToCrop=Rect.fromCenter(
中心：图像大小。中心（偏移。零），
宽度：imageSize.shortestSide，
高度：图像大小。最短边）；
变量矩阵=矩阵4.translationValue(
-boundsToCrop.topLeft.dx，-boundsToCrop.topLeft.dy，0）
存储
var paint=paint（）
..着色器=ImageShader（图像，TileMode.clamp，TileMode.clamp，矩阵）；
var半径=imageSize.shortestSide/2；
画布.画圈（偏移（半径，半径），半径，绘制）；
ui.Image裁剪=等待录制器
.endRecording（）
.toImage（imageSize.shortestSide.toInt（），imageSize.shortestSide.toInt（））；
var byteData=await crapped.toByteData（格式：ui.ImageByteFormat.png）；
返回byteData.buffer.asUint8List（）；
}

您需要什么

CustomPainter

？是否仅保存圆形图像？没有黑框？因为我必须进行一些图像处理，必须渲染处理后的图像并将其保存到本地存储。Waao！太棒了。Hello@pskink当CustomPainter paint（..）任务完成时，是否有听众可以收听？我必须在绘制（..）任务完成后立即重建小部件。