如何从 Flutter-web 中的小部件创建图像？

Question

要在 google 地图上显示自定义小部件 google_maps_flutter 我使用了一个非常方便的函数，可以将任何 Widget（包括包含图像的）转换为 Image，它然后我翻译成我需要的Uint8List。它适用于 iOS 和 Android。

Future createImageFromWidget( Widget widget){
  final RenderRepaintBoundary repaintBoundary = RenderRepaintBoundary();
  final RenderView renderView = RenderView(
    child: RenderPositionedBox(alignment: Alignment.center, child: repaintBoundary),
    configuration: ViewConfiguration(size: const Size.square(300.0), devicePixelRatio: ui.window.devicePixelRatio),
    window: null,
  );

  final PipelineOwner pipelineOwner = PipelineOwner()..rootNode = renderView;
  renderView.prepareInitialFrame();

  final BuildOwner buildOwner = BuildOwner(focusManager: FocusManager());
  final RenderObjectToWidgetElement<RenderBox> rootElement = RenderObjectToWidgetAdapter<RenderBox>(
    container: repaintBoundary,
    child: Directionality(
      textDirection: TextDirection.ltr,
      child: IntrinsicHeight(child: IntrinsicWidth(child: widget)),
    ),
  ).attachToRenderTree(buildOwner);

  buildOwner..buildScope(rootElement)..finalizeTree();
  pipelineOwner..flushLayout()..flushCompositingBits()..flushPaint();

  return repaintBoundary.toImage(pixelRatio: ui.window.devicePixelRatio)
    .then((image) => image.toByteData(format: ui.ImageByteFormat.png))
    .then((byteData) => byteData.buffer.asUint8List());
}

但不幸的是，当我尝试在 Web 上使用此功能时，出现以下错误：

Unsupported operation: toImage is not supported on the Web

现在 Flutter 支持 Image.toByteData 和 Picture.toImage #20750，但我不知道如何在我的案例中使用它。

实际上问题是 - 如何重新制作此功能以便它也能在 Web 上运行？

谢谢，有任何想法我都会很高兴

Answer 1

repaintBoundary.toImage 功能取决于 Scene.toImage，根据问题 #42767 中的评论，该功能尚未针对 Web 实现。
该问题目前也已取消优先级。

Answer 2

如果将 --dart-define=FLUTTER_WEB_USE_SKIA 放在 flutter build web 参数上，

toImage() 会起作用。

该方法在没有此参数的情况下在本地工作。

我在看到 crop 包文档后找到了这个解决方案，它也使用了 toImage()

编辑

我在通过 iPhone 访问应用程序时发现了一些问题，小部件生成的图像有效，但我在项目中的一些动画停止工作。

我发现了这个，我将只使用参数 --dart-define=FLUTTER_WEB_AUTO_DETECT=true 进行一些测试，看看是否可以在桌面上运行，android 和 iOS 是否可以正确地用于 Flutter web .

编辑 2

在 MacO 上进行一些测试后，toImage() 方法也可以正常工作。

如何从 Flutter-web 中的小部件创建图像？

How to create an image from a widget in Flutter-web?

google-maps

google-maps-markers

flutter

flutter-image

flutter-web