从 Widget 或 Canvas 创建原始图像

Posted 2023-02-23

【中文标题】从 Widget 或 Canvas 创建原始图像

【英文标题】：Creating raw image from Widget or Canvas

【发布时间】：2017-06-16 20:39:06

【问题描述】：

我的最终目标是能够通过传递原始图像数据或将图像保存到磁盘以供本地 android/ios 服务共享来共享动态图像。如何将颤振中的Widget 或Canvas 转换为原始图像数据（如byte[]）？

【参考方案1】：

您可以使用 Screenshot package 来获取您想要的widget 中的image。

https://pub.dev/packages/screenshot

【参考方案2】：

现在有对此的支持。您可以使用RenderRepaintBoundry 或OffsetLayer 或Scene。他们都有一个toImage。这是RenderRepaintBoundry.toImage()的链接

  Future<void> _capturePng() async 
    RenderRepaintBoundary boundary = globalKey.currentContext.findRenderObject();
    ui.Image image = await boundary.toImage();
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    print(pngBytes);
  

这是从文档中复制的。

【讨论】：

很好的解决方案！我想知道是否可以仅捕获小部件的一部分？因为只有小部件的一部分是我需要的。

@colin 如果可能，请尝试将要捕获的部分包装在上述小部件之一中。此外，Scene.toImage() 接收宽度和高度，您可能能够以不同方式利用它们（我不确定它是否会裁剪或扭曲原始图像）：

> 完成绘制阶段这是否意味着小部件必须在屏幕上显示？

@lawonga 我认为小部件不需要出现在屏幕上，因为您还可以指定像素密度来绘制它（不依赖于实际设备密度）

我昨天想通了！！谢谢

【参考方案3】：

目前在 FlutterView 中运行的 Dart 代码目前无法实现这一点，但是我们在实现文件跟踪方面存在错误：https://github.com/flutter/flutter/issues/6774

可以将 Flutter 小部件渲染为 FlutterView 的一部分，然后在 FlutterView 上使用 Java 或 Objective-C 接口来捕获图片，例如 FlutterView 实现的标准 android.View.getBitmap： https://docs.flutter.io/javadoc/io/flutter/view/FlutterView.html#getBitmap--

如果这对您的应用程序需求很重要，并且希望能够从 Dart 代码中捕获 Widget 树的位图，我们很乐意听到。请鼓励就上述问题提供进一步的背景信息！