我的最终目标是通过传递原始图像数据或将图像保存到磁盘以供本地Android/iOS服务共享动态图像。如何将 Flutter 中的 Widget
或 Canvas
转换为原始图像数据(例如 byte[]
)?
我的最终目标是通过传递原始图像数据或将图像保存到磁盘以供本地Android/iOS服务共享动态图像。如何将 Flutter 中的 Widget
或 Canvas
转换为原始图像数据(例如 byte[]
)?
现在已经支持这个功能了。您可以使用 RenderRepaintBoundary
、OffsetLayer
或者 Scene
。它们都有一个 toImage
方法。以下是 RenderRepaintBoundary.toImage() 的链接。
class PngHome extends StatefulWidget {
const PngHome({super.key});
@override
PngHomeState createState() => PngHomeState();
}
class PngHomeState extends State<PngHome> {
GlobalKey globalKey = GlobalKey();
Future<void> _capturePng() async {
RenderRepaintBoundary boundary = globalKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
ui.Image image = await boundary.toImage();
ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData!.buffer.asUint8List();
print(pngBytes);
}
@override
Widget build(BuildContext context) {
return RepaintBoundary(
key: globalKey,
child: Center(
child: TextButton(
onPressed: _capturePng,
child: const Text('Take screenshot', textDirection: TextDirection.ltr),
),
),
);
}
}
这是从文档复制并适应了最新的null safety和dart语言特性。值得注意的是,globalKey.currentContext
和 byteData
的值可能为空,因此最好在生产代码中对它们进行检查。
目前在FlutterView中运行的Dart代码无法实现此功能,但是我们已经跟踪了一个问题以实现这一点:https://github.com/flutter/flutter/issues/6774
可以将Flutter小部件作为FlutterView的一部分渲染,然后使用Java或Objective-C接口到FlutterView来捕获图片,例如标准的android.View.getBitmap,FlutterView实现了该接口:https://docs.flutter.io/javadoc/io/flutter/view/FlutterView.html#getBitmap--
如果您的应用程序需要此功能,并且希望能够从Dart代码内部捕获Widget树的位图,则我们很乐意听取您的意见。请随时提供有关上述问题的更多上下文信息!