如何以编程方式从 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 打开时是如何做到这一点的，但是一些关于它如何工作的示例代码甚至是 link 到源代码中发生这种情况的地方会有所帮助。

Answer 1

XML 数据无法从 PNG 中提取，因为它是光栅化压缩像素数据。我认为您正在寻找的格式是 SVG，它是一种基于 XML 的图像格式。使用 SVG 图像，您可以使用文件中的 XML 做任何您需要的事情，或者只上传 svg.

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

文件 > 导出为 > SVG...

希望对您有所帮助。

Answer 2

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

但对您来说更有趣的是 extractGraphModelFromPng

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

How to programatically extract XML data from draw.io PNG

html

javascript

xml

draw.io