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

这可能是一个比较小众的需求,也不知道有没有人需要。

我先描述下目前 Typora 导出 HTML 的情况,源文件是这样的

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

那么这样存在一个问题:

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

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

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


image

那么我就产生了一个想法,利用 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 编码的数据。

-h 参数可以查看帮助信息:

image

有一个 output html file 的可选参数,用来设置嵌入图片后的html文件输出路径,默认为 xxxx.compact.html。利用此参数,如果你想要就地更新源 html 文件,不生成新文件,自定义命令可以这样写:"D:\Temp\compact_html.exe" "${outputPath}" "${outputPath}"

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

另外只支持64位,windows 10以下的系统没测过。

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

下载地址(v1.1):

源代码:GitHub - EdenHell/compact_html: Embed image data directly to HTML files.

目前发现了一个bug :sweat_smile:,如果导出时选择的目标目录不是markdown文件所在目录,无法工作。可以将命令换成 "D:\Temp\compact_html.exe" "${outputPath}",这样除非插入的本地图片的路径是相对路径,还是可以正常工作的。这些问题在后续版本修复。 <— 已经修复,请重新下载新版本程序。

其它:

10 个赞

我倒是挺希望发给别人用 html 文件的,因为导出 pdf 会强行分页,宽度也有限制,排版会打乱一点,不好看。

1 个赞

我也有这个需求,之前都是通过将图片保存到本地,然后导出html,最后使用浏览器插件 SingleFile再进行一次保存完成的。
感谢作者的工具

哈哈,在此之前我也是这样干的,而且singlefile不认本地文件,我还用 python 起了个临时http server才行。

这个工具太赞了,但是我用的时候发现个奇怪的问题
image

显示Failed to load image data 但是导出的文件会有2个
一个是完整的已经转化完成的html
另一个是依旧外链图片的html

如果加载不了的图片会跳过,你先手动访问这个图片试一试,手动可以那就是bug。

Failed to load image data 后面跟的是他加载不了的图片路径,你查看下这个文件

你看我上面截图,没有compact.html后缀的是typora生成的原版html,嵌入图片我没有就地修改这个文件,是新写的文件,就是compact.html后缀那个
(v1.1 更新:增加输出文件路径参数,可以支持就地修改源文件)

1 个赞

懂了 意思是 可能有某一张图挂了是吧

嗯,是的

文章末尾更新了下阿里云盘、天翼云盘的和 github 的下载地址,以及源代码地址。

一个bug,图片没有扩展名时无法导出
另外,用${outputFileFullName}这个参数不能保存到其他文件夹,有没有能改文件夹的参数

1 个赞

嗯,严格来说应该根据文件头的信息来判定图片类型,但是目前比较偷懒,直接用的后缀名。没有的话自是识别不了。要不你手动设置个后缀名 :rofl: 设置错也没关系,typora 和浏览器都能正确识别,compact_html.exe 这一环用一个错的扩展名不影响,哈哈哈哈。

改文件夹的参数嘛,也就是输出文件路径?目前也没有(1.1版以后有了,利用 output html file 参数,不需要使用下面的命令)。 不过这个也可以立即解决,比如按照我的路径举例,你把导出命令后面跟上一个 move 命令就 ok 了:

"D:\Temp\compact_html.exe" "${outputFileFullName}" & move /y "${outputFileName}.compact.html" compact\ >nul

不行,还是不能改输出文件夹,只能输出在当前目录
截图-002

嗯,你导出的时候选的目录不是 md 文件所在目录对吧,我昨天理解错了,我以为是将*.compact.html 文件保存到 *.html文件不同的地方。

这个 bug 我也发现了(1.1 版已修复),昨晚我在正文补充了下说明:

目前发现了一个bug :sweat_smile:,如果导出时选择的目标目录不是markdown文件所在目录,无法工作。可以将命令换成 "D:\Temp\compact_html.exe" "${outputPath}" ,这样除非插入的本地图片的路径是相对路径,还是可以正常工作的。这些问题在后续版本修复。

啊,完蛋,我的图片都是保存的相对路径,只能等你修复了 :sob:

哈哈,没事,今天晚上应该可以搞定

下载地址更新了,你重新下

1.1 版本更新了就地更新源 html 文件的办法

谢谢谢谢,可以改目录了,完美
大佬,求你有空的时候还是修一下图片扩展名这个bug吧。现在有些网站下载的图片都不带扩展名,一个一个的改好麻烦

非常好,感谢作者开发。