如何从Flutter-web中的小部件创建图像? [英] How to create an image from a widget in Flutter-web?

问题描述

要在Google地图上显示自定义窗口小部件 google_maps_flutter ，我使用了一种非常方便的函数来翻译任何小部件(包括包含图像的小部件)转换为 Image ，然后将其转换为所需的 Uint8List .它在iOS和Android上都很好用.

To display custom widgets on google maps google_maps_flutter I use a very convenient function that translates any Widget (including those containing images) into an Image, which I then translate into the Uint8List I need. It works great on iOS and 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上使用此功能时，出现以下错误:

But unfortunately, when I try to use this function on the Web I get the following error:

不支持的操作:Web不支持toImage

Unsupported operation: toImage is not supported on the Web

现在Flutter已支持 Image.toByteData 和 Picture.toImage #20750 ，但我不知道该如何在我的情况下使用.

Now Flutter has support for Image.toByteData and Picture.toImage #20750, but I can't figure out how this can be used in my case.

实际上，问题是-如何重新制作此功能，使其也可以在Web上使用?

Actually the question is - how to remake this function so that it would work on the Web too?

谢谢，我对任何想法都很高兴

Thank you, I will be glad to any ideas

推荐答案

toImage()可以工作

toImage() works if you put --dart-define=FLUTTER_WEB_USE_SKIA on flutter build web arguments.

该方法在没有此参数的情况下在本地运行.

The method works locally without this argument.

在查看 crop 软件包文档后，我找到了该解决方案，该文档还利用了toImage()

I found this solution after seeing the crop package documentation, which also makes use of toImage()

编辑

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

I found some problems when accessing the application through the iPhone, the generation of images from a widget works, but some animations that I have in the project stopped working.

我发现了这个问题，我会提出一些建议仅使用参数-dart-define = FLUTTER_WEB_AUTO_DETECT = true 进行测试，以查看Flutter Web是否可以在台式机，Android和iOS上正常工作.

I found this question and i will make some tests only using the argument --dart-define=FLUTTER_WEB_AUTO_DETECT=true to see if works on desktop, android and iOS correctly with Flutter web.

编辑2

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

After some testing on MacOs, the toImage() method works correctly as well.

这篇关于如何从Flutter-web中的小部件创建图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！