Typora 导出 HTML 时将外链图片以 base64 形式嵌入

这是 @FrostSigh 同学发布的内容：Typora 导出 HTML 时将外链图片以 base64 形式嵌入，解决了一个问题：HTML 文件附带的图片「早晚会失效」，那么直接将图片以 base64 形式嵌入，变成可以显示图片的单 HTML 文件，就完美的解决了这个问题。@Appinn

Typora 是一款优美的 Markdown 编辑器，支持 Windows、macOS、Linux，有 Markdown 需求的同学都推荐试试。

有删减，可前往查看全部原文：Typora 导出 HTML 时将外链图片以 base64 形式嵌入，作者：FrostSigh

这可能是一个比较小众的需求，也不知道有没有人需要。我先描述下目前 Typora 导出 HTML 的情况，源文件是这样的：

导出后的 html 文件我们打开后检查这个引用的图片地址，可以看到其引用的地址还是本地的文件路径：

那么这样存在一个问题：

对于引用的本地图片，这个 html 文件你最多在本机上看看，如果图片文件路径有变化，那这个 html 文件里相应图片也会失效。更别说把 html 文件发给别人，其并不能看到图片。

那么如果引用的网络图片呢？就有可能某一天失效了。

当然，你可以设置 Typora 自动复制图片功能（见下图），自己本地查看还是可以用用的，但是如果发给别人，需要将素材文件夹和 HTML 文件一起发送，还是挺麻烦的。

那么我就产生了一个想法，利用 HTML img 标签的 Data URLs 语法，将图片嵌入到 markdown 里面 (markdown 可以用 img 标签)，这样就可以做到真正可便携的单文件 HTML了。

无独有偶，github 上也有人给 typora 提了类似的意见，大概意思是，在 Typora 中插入图片时，自动编码图片为 base64。Typora 回复说是这样嵌入了二进制数据违背了 Markdown 作为纯文本文件的初衷，拒绝了这个提议。我觉得还是挺有道理的，哈哈，而且 markdown 一大优势就是可读性高，那如果里面多了大片大片的 base64 编码的字符，那确实很不好。

那么，最后我给的方案是什么呢，我花了一些空余（摸鱼）时间，写了个小工具 compact_html.exe，利用 Typora 导出后运行自定义命令的功能，把 HTML 文件里的图片引用全替换成了Data URLs形式，也就说将图片数据嵌入到了 html 文件里了，这样也不影响源文件作为纯文本的纯粹性：

上图中自定义命令是 "D:/Temp/compact_html.exe" "${outputPath}"

生成了一个后缀名为 compact.html 的文件，打开后可以看到引用的图片从本地（网络同样）变成了 base64 编码的数据。

算是提高了导出的 html 文件的可用性吧，这个小工具名字叫 compact_html.exe，1.1M，C++写的，单文件无依赖，其实这程序挺适合学生用来练手的…

再提一句，对浏览器保存的网页使用这个工具效果不大，推荐浏览器 singlefile 插件，可以处理所有外链资源（除了图片外还有css, 字体等），而 compact_html.exe 只能处理外链图片。哈哈，如果不是 singlefile 不能处理离线文件我就不用写这个工具了。

最后，感兴趣的同学可以前往查看帮助信息、源码、下载：

• https://meta.appinn.net/t/topic/25788