Typora 導出 HTML 時將外鏈圖片以 base64 形式嵌入

這是 @FrostSigh 同學發布的內容:Typora 導出 HTML 時將外鏈圖片以 base64 形式嵌入,解決了一個問題:HTML 文件附帶的圖片「早晚會失效」,那么直接將圖片以 base64 形式嵌入,變成可以顯示圖片的單 HTML 文件,就完美的解決了這個問題。@Appinn

Typora 導出 HTML 時將外鏈圖片以 base64 形式嵌入

Typora 是一款優美的 Markdown 編輯器,支持 Windows、macOS、Linux,有 Markdown 需求的同學都推薦試試。


有刪減,可前往查看全部原文:Typora 導出 HTML 時將外鏈圖片以 base64 形式嵌入,作者:FrostSigh

這可能是一個比較小眾的需求,也不知道有沒有人需要。我先描述下目前 Typora 導出 HTML 的情況,源文件是這樣的:

Typora 導出 HTML 時將外鏈圖片以 base64 形式嵌入

導出后的 html 文件我們打開后檢查這個引用的圖片地址,可以看到其引用的地址還是本地的文件路徑:

Typora 導出 HTML 時將外鏈圖片以 base64 形式嵌入

那么這樣存在一個問題:

對于引用的本地圖片,這個 html 文件你最多在本機上看看,如果圖片文件路徑有變化,那這個 html 文件里相應圖片也會失效。更別說把 html 文件發給別人,其并不能看到圖片。

那么如果引用的網絡圖片呢?就有可能某一天失效了。

當然,你可以設置 Typora 自動復制圖片功能(見下圖),自己本地查看還是可以用用的,但是如果發給別人,需要將素材文件夾和 HTML 文件一起發送,還是挺麻煩的。

Typora 導出 HTML 時將外鏈圖片以 base64 形式嵌入

那么我就產生了一個想法,利用 HTML img 標簽的 Data URLs 語法,將圖片嵌入到 markdown 里面 (markdown 可以用 img 標簽),這樣就可以做到真正可便攜的單文件 HTML了。

無獨有偶,github 上也有人給 typora 提了類似的意見,大概意思是,在 Typora 中插入圖片時,自動編碼圖片為 base64。Typora 回復說是這樣嵌入了二進制數據違背了 Markdown 作為純文本文件的初衷,拒絕了這個提議。我覺得還是挺有道理的,哈哈,而且 markdown 一大優勢就是可讀性高,那如果里面多了大片大片的 base64 編碼的字符,那確實很不好。

那么,最后我給的方案是什么呢,我花了一些空余(摸魚)時間,寫了個小工具 compact_html.exe,利用 Typora 導出后運行自定義命令的功能,把 HTML 文件里的圖片引用全替換成了Data URLs形式,也就說將圖片數據嵌入到了 html 文件里了,這樣也不影響源文件作為純文本的純粹性:

Typora 導出 HTML 時將外鏈圖片以 base64 形式嵌入

上圖中自定義命令是 "D:\Temp\compact_html.exe" "${outputPath}"

Typora 導出 HTML 時將外鏈圖片以 base64 形式嵌入

生成了一個后綴名為 compact.html 的文件,打開后可以看到引用的圖片從本地(網絡同樣)變成了 base64 編碼的數據。

Typora 導出 HTML 時將外鏈圖片以 base64 形式嵌入

算是提高了導出的 html 文件的可用性吧,這個小工具名字叫 compact_html.exe,1.1M,C++寫的,單文件無依賴,其實這程序挺適合學生用來練手的…

再提一句,對瀏覽器保存的網頁使用這個工具效果不大,推薦瀏覽器 singlefile 插件,可以處理所有外鏈資源(除了圖片外還有css, 字體等),而 compact_html.exe 只能處理外鏈圖片。哈哈,如果不是 singlefile 不能處理離線文件我就不用寫這個工具了。

最后,感興趣的同學可以前往查看幫助信息、源碼、下載:

av人妻熟妇的荡欲中文字幕,av免费一片看久久,AV无码一区二区二三区1区6区,A片高潮喷水久久久网站_无码