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

猜测思路:

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

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

PNG文件格式详解

image

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

image

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

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

image

这段应该就是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:

pngcheck Home Page

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