【drawio探秘】导入drawio输出的png图片可以二次编辑
猜测思路:
- drawio保存时:png图片中额外保存了xml格式的图表信息,
- drawio导入自己导出的png图片的时候,解析xml数据并替换png绘制图表到工作区
在阅读到这篇文章后由了验证的方法
首先使用工具https://www.nayuki.io/page/png-file-chunk-inspector 解码分析png的数据
可以看到文本信息数据块tEXt(textual data)内有xml数据,
我们复制出来Text string的值,经过decodeURIComponent处理后的到
这段应该就是drawio保存的图表信息
如何实现读取和写入
如果需要使用 nodejs 对指定区进行修改和提取,则可以利用 png-chunks-encode
和 png-chunks-extract
- 读取本地文件
- 提取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:
png文件格式详解:https://blog.mythsman.com/post/5d2d62b4a2005d74040ef7eb/