如何在 Flutter 中导出屏幕的高分辨率图像？答案

【问题标题】：How can I export high resolution image of the screen in Flutter?如何在 Flutter 中导出屏幕的高分辨率图像？
【发布时间】：2021-05-19 17:09:00
【问题描述】：

如何在 Flutter 中以高分辨率将屏幕导出为图像或 PDF？是否可以将具有背景图像和文本字段的容器导出为图像？我试过这个解决方案（How to take a screenshot of the current widget - Flutter），但分辨率太差了。我需要不同尺寸的屏幕，例如40x60cm、20x30cm 和 300Ddpi。

【问题讨论】：

您想要做的并不简单...您链接的方法“获取”渲染的小部件并将其“放入”变量中。您不能使用更大尺寸的小部件并导出
您好，感谢您的回复。有没有其他方法可以将小部件导出为图像？我读到颤振支持 .svg 文件，所以也许当我添加 .svg 文件而不是 jpg 文件时？
它应该返回一个 png，而不是一个 jpg。顺便说一句，不，据我所知，你不能导出为 svg

标签： image flutter export

【解决方案1】：

你试过用pixelRatio吗？

ui.Image image = await boundary.toImage(pixelRatio: 10);

【讨论】：

我现在就试试，然后告诉你。

【解决方案2】：

尝试了pixelRatio 并将其与更大的响应相结合。没有 cacheWidth - 它确实有效，至少对于 PNG 导出而言。

但是请注意，10 个 pixelRatio 需要相当长的时间才能捕获...

图片的代码片段：

child: ClipRRect(
  borderRadius: BorderRadius.circular(15),
  child: Image.file(
    File(widget.myGroup.picture),
    width: MediaQuery.of(context).size.width,
    // NO cacheWidth:
    // cacheWidth: MediaQuery.of(context).size.width,
    fit: BoxFit.fitWidth,
  ),
),

_capturePng() 的代码片段：

Future<Uint8List> _capturePng() async {
  RenderRepaintBoundary boundary = globalKey.currentContext.findRenderObject();

  if (boundary.debugNeedsPaint) {
    print("Waiting for boundary to be painted.");
    await Future.delayed(const Duration(milliseconds: 20));
    return _capturePng();
  }

  var image = await boundary.toImage(pixelRatio: 10);
  var byteData = await image.toByteData(format: ImageByteFormat.png);
  return byteData.buffer.asUint8List();
}

（参考this question here about screenshot with flutter on Stack Overflow）

【讨论】：