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

4
简而言之,我想使用PHP或JavaScript从draw.io保存的PNG中提取XML数据。我正在使用具有图层的draw.io图像来记录网络设备之间的物理连接。文档站点是运行在我没有管理权限的DokuWiki实例的内部站点。我可以将导出的PNG文件上传到该站点,但不允许上传TXT、XML或SVG文件。由于某种原因,我可以在页面上嵌入HTML、PHP和JavaScript。我已经能够粘贴HTML嵌入代码,但这会显著减慢浏览器编辑页面的速度,一旦我粘贴了嵌入代码,我就无法进行任何进一步的更改。
我的解决方案是使用PHP或JavaScript从上传的PNG中提取XML数据,与此问题完全相反。然后,我将把它插入到页面上的嵌入代码中。
以下是我将要使用的嵌入代码:
<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打开时是如何实现的,但提供一些示例代码或链接到源代码中发生的位置会很有帮助。"Original Answer"翻译成"最初的回答"。
2个回答

4
如果 Draw.io 能做到,你也能做到!但我认为只有在导出为 PNG 时选择了 包括我的图表副本 选项才可能实现。使用此选项,Draw.io 会在 PNG 中保存附加数据(你可以查看 writeGraphModelToPng)。
但对你来说更有趣的是 extractGraphModelFromPng

是的,这看起来就像我需要的。我会尝试一下并查看能否让它正常工作。 - ekrekeler
1
只是提供更多信息。在PNG中,似乎可以存储“文本注释”-https://en.wikipedia.org/wiki/Portable_Network_Graphics。具体来说,请注意`zTXt`字段。上述提到的2个源代码文件内部引用了`zTXt`。巧合吗?我认为不是 :) - Raghuram Krishnaswami

0

由于PNG是栅格化压缩像素数据,因此无法从中提取XML数据。我认为您要寻找的格式是SVG,这是一种基于XML的图像格式。使用SVG图像,您将能够对文件内部的XML进行任何所需操作,或者只需上传SVG。

在draw.io中,您需要导出为SVG。

文件 > 导出为 > SVG...

enter image description here

希望这能有所帮助。

如果文档站点允许我上传SVG文件,这将解决我遇到的问题。我刚刚尝试了一下,但是不行。我会确保在我的问题中提到这一点。 - ekrekeler
2
另外,在导出的PNG图像中必须包含某种XML数据,因为我可以重新上传PNG图像到draw.io以进行进一步编辑。 - ekrekeler
4
我们将图表数据嵌入PNG(ZTXT)的压缩文本部分。 - Frodo Baggins
png格式嵌入xml代码(如果选择)。https://about.draw.io/choose-export-diagram-format/ - rupat

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接