JavaScript is required

导出图谱Base64图片数据

这个示例展示如何把完整 relation-graph 场景捕获为 Base64 图片数据,而不是立即下载。它加载静态图,准备导出状态,使用共享 modern-screenshot 辅助方法截图,把 blob 转为 data URL,并在悬浮工具窗中同时预览图片与原始字符串。

在 GraphPilot 中编辑

将 Relation Graph 导出为 Base64 图像数据

这个示例构建了什么

这个示例构建了一个只读的图谱导出工具,它不会立即下载截图结果,而是将捕获结果保存在内存中。页面会显示一个全高度的 relation-graph 画布、蓝色圆形节点、右上角的内置工具栏,以及一个悬浮在图谱上方的控制窗口。

用户可以选择导出背景色,执行 Generate Image Base64 操作,预览生成的截图,并在同一个面板中查看完整的数据 URL 字符串。这个示例最重要的点在于工作流:先让图谱进入适合生成图片的状态,将其捕获为 blob,再转换为 Base64,最后回渲染到界面中以便立即验证。

数据是如何组织的

图谱数据在 initializeGraph() 内部以内联方式声明为一个 RGJsonData 对象。它使用 rootId: '2'、扁平的 nodes 数组,以及扁平的 lines 数组,其中每条连线都已经显式包含 fromtotext 字段。

在调用 setJsonData() 之前没有任何结构预处理。这个示