【drawio探秘】导入drawio输出的png图片可以二次编辑

[Topppy]

猜测思路：

1. drawio保存时：png图片中额外保存了xml格式的图表信息，
2. drawio导入自己导出的png图片的时候，解析xml数据并替换png绘制图表到工作区

在阅读到这篇文章后由了验证的方法

[PNG文件格式详解](https://blog.mythsman.com/post/5d2d62b4a2005d74040ef7eb/)

首先使用工具https://www.nayuki.io/page/png-file-chunk-inspector 解码分析png的数据

可以看到文本信息数据块tEXt(textual data)内有xml数据，

我们复制出来Text string的值，经过decodeURIComponent处理后的到

这段应该就是drawio保存的图表信息

如何实现读取和写入

如果需要使用 nodejs 对指定区进行修改和提取，则可以利用 [png-chunks-encode](https://www.npmjs.com/package/png-chunks-encode)  和 [png-chunks-extract](https://www.npmjs.com/package/png-chunks-encode)

• 读取本地文件
• 提取tEXtchunk内容
• 修改并写入png
• 保存为png图片

DEMO

https://codesandbox.io/s/magicpng-y27un0

附录

xml在线format：https://jsonformatter.org/xml-editor

pngchunk分析：https://www.nayuki.io/page/png-file-chunk-inspector

pngcheck：

[pngcheck Home Page](http://www.libpng.org/pub/png/apps/pngcheck.html)

png文件格式详解：https://blog.mythsman.com/post/5d2d62b4a2005d74040ef7eb/