如何以编程方式从draw.io PNG中提取XML数据

Question

长话短说，我希望能够使用浏览器中的PHP或JavaScript从draw.io保存的PNG中提取XML数据。

我正在使用带有层的draw.io图像来记录网络设备之间的物理连接。文档站点是运行dokuwiki实例的内部站点，我没有管理权限。我可以将导出的PNG文件上载到站点，但不允许上载TXT，XML或SVG文件。无论出于何种原因，我都可以在页面上嵌入HTML，PHP和JavaScript。我现在可以粘贴HTML嵌入代码，但是这在编辑页面时大大降低了浏览器的速度，使我一旦粘贴了嵌入代码便无法进行任何进一步的更改。

为此，我想要的解决方案是使用PHP或JavaScript从上载的PNG中提取XML数据。与this ask相反。然后，将其插入页面上的嵌入代码中。

这是我要使用的嵌入代码：

<div
  class="mxgraph"
  style="max-width:100%;border:1px solid transparent;"
  data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;_INSERT_XML_DATA_HERE_&quot;}">
</div>

<script
  type="text/javascript"
  src="https://www.draw.io/js/viewer.min.js">
</script>

我不了解足够的JavaScript来弄清楚draw.io在从PNG打开时如何做到这一点，但是一些有关其工作方式的示例代码甚至是指向源代码发生位置的链接都将是有帮助。

Answer 1

如果Draw.io可以做到，那么您也可以做到！但是我认为只有在导出到PNG时选择Include a copy of my diagram选项才有可能。使用此选项Draw.io将其他数据保存为PNG（您可以查看writeGraphModelToPng。

但是对您来说更有趣的是extractGraphModelFromPng

Answer 2

XML数据是栅格化的压缩像素数据，因此无法从PNG中提取。我认为您正在寻找的格式是SVG，这是一种基于XML的图像格式。使用SVG图片，您可以使用文件中的XML进行任何所需的操作，也可以仅上传svg。

在draw.io中，您将需要导出为svg。

文件>导出为> SVG ...

希望这会有所帮助。