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

2024-01-03

在谷歌地图上显示自定义小部件谷歌地图颤振 https://pub.dev/packages/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 上不支持 toImage

现在 Flutter 已经支持Image.toByteData and Picture.toImage #20750 https://github.com/flutter/engine/pull/20750,但我不知道如何在我的案例中使用它。

实际上问题是 - 如何重新设计这个功能,使其也能在 Web 上运行?

谢谢,我很高兴有任何想法


toImage() 如果你把--dart-define=FLUTTER_WEB_USE_SKIA on flutter build web论据。

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

我看到这个解决方案后发现crop https://pub.dev/packages/crop包文档,它也使用了 toImage()

EDIT

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

我找到了这个question https://stackoverflow.com/questions/64583461/how-to-use-skia-canvaskit-in-flutter-web我将仅使用参数进行一些测试--dart-define=FLUTTER_WEB_AUTO_DETECT=true查看 Flutter Web 是否可以在桌面、Android 和 iOS 上正常工作。

EDIT 2

经过在 MacO 上的一些测试,toImage() 方法也可以正常工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从 Flutter-web 中的小部件创建图像? 的相关文章

  • 如何在列表视图中滚动添加更多项目?

    这里的代码当前加载了存储在 Firestore 集合中的所有啤酒 我如何最初只加载 10 个啤酒 然后当用户向下滚动并到达 10 个啤酒列表的末尾时 它应该加载最后一次酿造后还有 10 杯 并且酿造应根据时间戳进行排序 class Brew
  • 使用 google Directions API 的地图视图绘制方向 - 解码折线

    我正在尝试使用 Google 方向 API 在我的地图视图上显示方向 但我在从 JSON 响应获取数据时遇到困难 我可以获得 级别 和 点 字符串 但无法弄清楚如何将它们解码为地图上的点 任何帮助将非常感激 我有一个类可以为您解码它们 添加
  • Google 地图 API 标记图标 URL?

    我正在尝试将标记图标更改为 红圈 或 红针 或其他任何内容 在这些代码中 markerOptions icon images beachflag png 标记不显示 但如果我做icon一行注释行 因此标记显示为 red pin icon 所
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • 如何在 Flutter App 中按时间注销?

    如果用户在登录后对应用程序没有反应或不活动超过 5 分钟 我需要从应用程序中注销用户 该应用程序将转到主登录页面 我尝试实施给定的解决方案here https stackoverflow com questions 52602606 how
  • 谷歌坐标认证

    当我尝试连接到 Google 坐标时 总是出现异常GoogleAuthException 我拥有 Google 地图协调中心许可证 我确实使用我的包应用程序名称和 SHA1 在 google 控制台中创建了我的客户端 ID 我将权限添加到清
  • 在没有动画的情况下替换 MaterialApp 中的初始路线?

    我们的应用程序建立在Scaffold到目前为止 我们已经能够使用内部提供的调用来满足我们的大部分路由和导航要求NavigatorState pushNamed pushReplacementNamed ETC 但我们不想要的是 当用户从抽屉
  • Flutter 2.0 appbar 后退按钮如果包含 endDrawer 就会消失

    我刚刚将 flutter 更新到 2 0 我意识到如果 appbar 还包含 endDrawer 所有后退按钮都会消失 带有 endDrawer 的应用栏 https i stack imgur com X2jaf png 我试图摆脱 en
  • 如何将动画应用到 GMSMarker

    我正在通过使用适用于 iOS V1 1 0 的 Google Maps SDK 将 iOS 地图迁移到 google 地图来更改我的应用程序 并且我尝试在添加 删除时对标记进行动画处理 但我在与此相关的文档中没有找到任何建议 请建议我如何在
  • 如何将 Dart 代码迁移到不可空 (NNBD)?

    我有一个之前编写的 Flutter 应用程序Dart 中引入了 null 安全性 https stackoverflow com questions 60068435 what is nullability in dart non null
  • 如何从谷歌地图中的纬度和经度获取地址位置? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 所以我有纬度和经度就像44 4647452 and 7 3553838 我需要获得如下地址 米兰 意大利 str 肯尼迪 89 我怎样才能
  • Android Studio 无法运行 Xcode 模拟器

    我正在尝试使用 Xcode iPhone 模拟器模拟我的 Flutter 应用程序 但收到此错误 在升级 Android Studio 和 Xcode 之前 它运行良好 Launching lib main dart on iPhone X
  • Flutter:如何使用 AnimatedContainer 和扩展列?

    假设我们有 3 个孩子Column Flexible flex 1 child Container color Colors red Flexible flex 3 child Container color Colors yellow F
  • 将其从 Google Maps API v2 转换为 v3

    这适用于 Google Maps API v2 现在如何将其转换为 API v3 谢谢 Radar 1 Overlay Tiles var radar layer new GTileLayer new GCopyrightCollectio
  • Python,Google Places API - 给定一组纬度/经度查找附近的地点

    我有一个由商店 ID 及其纬度 经度组成的数据框 我想迭代该数据框 并使用 google api 为每个商店 ID 查找附近的关键地点 例如输入 Store ID LAT LON 1 1 222 2 222 2 2 334 4 555 3
  • 条件必须具有 bool 静态类型

    有什么方法可以在这种情况下使用未来的布尔值 或者有更好的方法吗 Widget buildRow String pair final Future
  • 如何确定我们是否正在 Dart (Flutter) 中运行单元测试

    在 Flutter Dart 中从单元测试调用函数时 如何确定我正在运行单元测试还是实际应用程序 如果在单元测试中 我想传递不同的数据 您可以使用以下内容来检查您是否正在运行测试 Platform environment containsK
  • 如何从 SDK 实现每个会话的 Google Places 自动完成功能?

    是否可以从 Android 和 iOS 应用程序的 place sdk 实现基于会话的自动完成 根据 6 月 11 日生效的新 Google 地图框架定价 对自动完成的请求可以分为基于击键 会话的请求 我找不到描述实施步骤的文档 除了这个参
  • 同屏上多个浮动操作按钮显示黑屏

    我尝试在其中一个屏幕上添加两个浮动操作按钮 结果在第一次重新加载应用程序后出现黑屏 Column mainAxisSize MainAxisSize min children
  • 如何使用 Google Maps for Android V2 处理地图移动结束?

    我想在地图中心更改后立即对地址进行地理编码 如何使用新的 Android 版 Google 地图 V2 处理地图移动 我说的是用户用手指拖动地图的情况 查看新的地图 API Override public void onMapReady G

随机推荐

  • 匹配任何数字的正则表达式模式包括 1-9 除 2

    我需要一个正则表达式模式来匹配任何数字 包括 1 9 数字 除了 2 我的尝试 1 9 2 但这对我不起作用 另一种方法 D2 这意味着 不是非数字或 2
  • TypeORM 创建表后插入基本主数据(类型、状态等)

    我有问题想问你 我正在使用 NestJS 和 typeORM 我试图在创建表后将默认值插入到表中 例如 我有一个优先级表 我需要插入高 中 低值 我尝试了 typeorm 和 NestJS 文档中的所有内容 并从这里阅读了相关问题和答案 我
  • 如何使用 testng.xml 从大型 TestNG 套件执行一项测试?

    我有一个包含大量方法的 TestNG 套件 我使用构建在 TestNG 运行器之上的包装器来执行该套件 除了一个之外 套件中的所有测试均失败 我应该在 testng xml 中编写什么来执行那个失败的测试 明显的解决方案是为所有方法分配唯一
  • svnserve VS mod_dav_svn

    我们计划在网络本身相当慢的环境中安装 Subversion 存储库 之前在那里使用的VCS是VSS 使用它简直就是一场噩梦 不仅仅是因为它的 特性 所以 我的问题是 Svnserve 和 apache 模块之间的选择 我知道由于无状态协议
  • ASP.NET MVC 是否已准备好用于业务应用程序(集成第 3 方控件/组件)?

    我的公司已经开发 并且仍在继续开发 一个大型 ASP NET 业务应用程序 我们的平台是 ASP NET 2 0 使用一些 ASP NET Ajax 是广泛使用第三方组件 如网络网格 组合框 树视图 日历和日程安排控件等 现在 我对 ASP
  • 使用linq生成直接更新而不需要select

    大家好 我仍在学习 LINQ 所以如果这很幼稚 请原谅我 当您直接处理 SQL 时 您可以生成带有条件的更新命令 而无需运行 select 语句 当我使用 linq 时 我似乎遵循以下模式 选择实体 修改实体 提交更改 我想做的是使用 li
  • 为什么允许从一个构造函数调用另一个构造函数?

    我正在查看有关 SO 的其他问题 但我没有真正看到我的问题的解释 我读到从另一个构造函数调用构造函数 使用 this 关键字 是valid 但我不明白why这是有效的 以前 我认为每个对象只能有一个构造函数 构造函数链接似乎打破了这一逻辑
  • PostgreSQL 删除触发器

    我正在 PGAdminIII 上创建一个触发器 我想在其中删除另一个表上具有外键的行 但是我遇到了语法错误 并且找不到问题所在 CREATE TRIGGER clienteDelete BEFORE DELETE ON cliente FO
  • OCR应用前的图像清理

    过去几个小时我一直在尝试 PyTesser 它是一个非常好的工具 关于 PyTesser 的准确性 我注意到以下几点 包含图标 图像和文本的文件 准确度 5 10 仅包含文本的文件 已删除图像和图标 准确率 50 60 拉伸文件 这是最好的
  • 打印带有演示者备注的 xaringan 幻灯片

    是否可以打印带有演示者备注的 Xaringan 幻灯片 我知道我可以使用这些方法打印幻灯片 https github com yihui xaringan wiki Export Slides to PDF https github com
  • 如何将 Leiningen 模板部署到 Clojars?

    我在本地计算机上创建了一个 Leiningen 项目 然后通过执行以下操作将其转换为模板 lein create template webdb 然后我安装模板 cd webdb lein install 这允许我在本地基于模板创建项目 le
  • 缺乏后视的解决方法?

    回答另一位用户的问题 https stackoverflow com q 28044217 3725745我将下面的正则表达式组合在一起来匹配字符串中的数字 b 0 9 0 9 b 在提供答案后 我注意到 如果由于 b 与句点字符匹配而导致
  • GSON 2.0+ 从两个不同的序列化字段名称之一反序列化字段

    在我的 Java 类中 我有一个声明如下的字段 protected double a 0 0 在反序列化以重构此类的 JSON 中 该字段可以显示为两个不同名称之一 遗留问题 例如 JSON 字段可能如下所示 a 9 57 或者像这样 d
  • 获取指向字节数组的指针的不安全方法

    此行为在 C 中有效吗 public class MyClass private byte data public MyClass this data new byte 1024 public unsafe byte getData byt
  • Scrapy 和 Python。名称错误

    我正在尝试计算当前的货币汇率 请您看一下是否发现错误 items py import scrapy class CurrItem scrapy Item country scrapy Field currency scrapy Field
  • 如何使用系统属性替换 Typesafe 配置文件中的占位符?

    我需要参考java io tmpdir在我的 application conf 文件中 我打印了我的配置内容 val c ConfigFactory load System err println c root render 它使它像 de
  • R 上下文、环境和带有“.Call”的调用堆栈

    有版本吗parent frame or sys calls或其他可以直接从 C 代码调用的通用上下文函数 Call 环顾四周Rinternals h等等 我似乎找不到类似的东西 我能想到的最好的办法是 my fun lt function
  • 如何根据js中的父位置动态调整div的大小

    我一直在编写一个代码 该代码展示了如何动态调整 div 的大小 然而 代码被困在 1 个元素上 我做了一些工作来转换为多个 div 调整器 现在 在调整大小时 鼠标和 div 之间会出现一个空格 我的目标是确保根据父位置 使用精确的鼠标位置
  • 如何使用 urllib2 使用带身份验证的代理访问 ftp/http 服务器

    更新 请参阅我的解决方案的评论 我的Python代码使用urllib2使用用户名和密码通过代理访问 FTP 服务器 我同时使用urllib2 ProxyHandler and a urllib2 ProxyBasicAuthHandler通
  • 如何从 Flutter-web 中的小部件创建图像?

    在谷歌地图上显示自定义小部件谷歌地图颤振 https pub dev packages google maps flutter我使用一个非常方便的功能来翻译任何Widget 包括那些包含图像的 到Image 然后我将其翻译成Uint8Lis