image - 如何在 Flutter 中只捕获 renderObject 内部的图像而没有周围的空间？

Question

图像是使用 CustomPaint 创建的，它有一个像这样的方形 Canvas :

_imagePaint = CustomPaint(
      size: Size(width, width),
      painter: imagePainter(image: image),
    );

我将图像放在 RepaintBoundary 中，如下所示:

Container(
   height: Device.screenHeight * 0.56,
   child: RepaintBoundary(
      key: imageAreaKey,
      child: imagePaint,
   ), // RepaintBoundary
), // Container

然后我像这样捕捉图像:

// Getting the render object that contains the image on screen
final RenderRepaintBoundary boundary = imageAreaKey.currentContext.findRenderObject();

// Capturing the image inside the render object
final image = await boundary.toImage(pixelRatio: pixelRatio);

// Converting the image into ByteData
final byteData = await image.toByteData(format: ui.ImageByteFormat.png);

return byteData.buffer.asUint8List();

但结果显示图像周围有一些透明空间。当我转换为 JPG 格式时特别明显，将透明空间变成黑色。

请看下图。注意图像顶部和底部的黑色区域。如何第一次只截取没有空格的图像？

如果不可能，那么尽管有许多不同的屏幕尺寸，我该如何摆脱它？

注意:原图是一个完美的正方形

Answer 1

您可以尝试使Container 的height 等于设备的宽度。

Container(
   height: Device.screenWidth,
   child: RepaintBoundary(
      key: imageAreaKey,
      child: imagePaint,
   ), // RepaintBoundary
),