这是 @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 不能处理离线文件我就不用写这个工具了。
最后,感兴趣的同学可以前往查看帮助信息、源码、下载:
优惠购买
另外,留下一条数码荔枝的购买链接,首单立减5元,带返利,感谢支持:
好思路~我原来都是保存整页pdf,就是因为保存html麻烦
直接绑定PicGo就好了,每次复制图片到Markdown就可以自动上传到GitHub等仓库,之后分享也很简便。
typora毕竟只是个纯文本软件,一般要么自动上传图床,要么导出pdf分享,html用的真不多
我之前也用go写过一个这个工具。会把所有外部的css和js,包括base64图片嵌入到html中
咋不发出来
哪个是你啊?首次评论需要人工审核。后台只有你的这一条。
我记得当年的Markdown Edit支持这个:
https://github.com/mike-ward/Markdown-Edit
我在回上一条
没太看懂,这样是不是就不需要图床了?
还是pdf最好,因为格式样式最统一。
pdf 对页宽页长有限制,会进行分页,如果不是在写 markdown 就考虑到这个问题进行排版,那 pdf 的显示效果和你编写时看到的效果会有不小出入。
我相信大部分人写 md 文件不是为了打印,如果为了打印去写文档,还是建议 word。
所以,仅考虑电子设备上阅读,为了获得与编写时一样的显示效果,那还是得 html(不分页,没页宽限制太爽了)。
挺好,我一直是用Chromium插件SingleFile的,原理类似,都是将图片直接以Base64写在HTML中,但是SingleFile可以在各种网页上使用,所以还是感觉功能性更强一些。
建议如果是归档文件的话,最好还是导出 PDF,或者搞一个自己的图床服务站,比如阿里云买一个 oss,我自己的博客就是这样。关键是使用 Base64 编码之后,嵌入文章的图片的内容比原图片会大 1/3,这个是因为 base64 的图片编码所导致的。
如果真的图太多或者太大,可以考虑bng格式,这个作者给了一个js库用于解压缩,大图可以压缩为原来的十分之一尺寸,放在自定义的html中非常合适,只不过,牺牲一些性能。
pdf 和 html 的取舍我前面有分享过。自己搞图床不是人人都会,而且离线了就用不了了。base64 编码确实会膨胀,好在现在硬盘空间不太值钱。
base64这个早就用了,就是优缺点都太明显。优点是:方便一个文件啥都有;缺点是:typora打开文件有2M限制,如果图片过多过大以后这个markdown就打不开了。
typora偏好设置里没有的导出设置哇