背景說明

• 使用工具將圖片轉換為 Base64 編碼后粘貼到微信公眾號，圖片正常顯示
• Google Chrome 瀏覽器內置圖片轉 Base64 編碼工具
• 使用畫圖工具打開圖片，全選復制圖片內容后粘貼到微信公眾號，圖片正常顯示

操作說明

MarkDown 編輯器

• 因為使用 Google Chrome 瀏覽器作為編碼工具，所以需要編輯器支持在瀏覽器中打開正在預覽的 MarkDown 文件。如果不支持，可先導出HTML文件，然后使用瀏覽器打開HTML文件，但操作過于繁瑣。
• MarkdownPad2和安裝插件后的Visual Studio Code支持在瀏覽器中打開正在預覽的 MarkDown 文件。
• Visual Studio Code打開含 Base64 編碼的圖片的 MarkDown 文件時卡頓嚴重。此時可使用Notapad++進行文件編輯。

Google Chrome 瀏覽器

轉碼方法 1

1. 按F12打開開發者模式
2. 點擊Application>Frames>top>Images，點擊圖片文件名。在右側欄中右鍵單擊圖片，點擊Copy image as data URI。以data:image/jpeg;base64作為開頭的對應圖片的base64數據就復制到了剪切板。
   

轉碼方法 2

1. 按F12打開開發者模式
2. 點擊Sources>Page，找到圖片后點擊文件名。在右側的導航欄中右鍵單擊圖片，點擊Copy image as data URI以復制圖片的base64數據。
   

轉碼方法 3

1. 按F12打開開發者模式
2. 點擊Network
3. 按Ctrl+R重新加載記錄
4. 點擊圖片文件名，在右側的導航欄中右鍵單擊圖片，點擊Copy image as data URI以復制圖片的base64數據。

轉碼方法 4

1. 按F12打開開發者模式
2. 點擊Network
3. 按Ctrl+R重新加載記錄
4. 右鍵單擊圖片文件名，點擊Copy>Copy response以復制圖片的base64數據。此項還提供開發人員所需的特殊格式。
   

圖片查看器

• 粘貼渲染后的內容到微信公眾號，本地圖片加載失敗
• 復制資源管理器中的圖片，在微信公眾號中選中粘貼失敗的圖片，按Ctrl+V進行粘貼后無反應。圖片替換失敗。
  
• 用畫圖工具打開圖片，按Ctrl+A以全選圖片，按Ctrl+C以復制圖片，在微信公眾號中選中粘貼失敗的圖片，按Ctrl+V進行粘貼后圖片替換成功。
• 用XnView MP打開圖片，按Ctrl+C以復制圖片，在微信公眾號中選中粘貼失敗的圖片，按Ctrl+V進行粘貼后圖片替換成功。在沒有使用自動化工具的情況下，這種方式是除了使用微信公眾號支持的圖床以外比較快的一種方式。
  

后記

• 在 JavaScript > Browser 對象 > Window > 對象方法 中提供的btoa()方法可以創建一個base-64編碼的字符串。
• 微信屏蔽外鏈，屏蔽的是圖片的來源。復制粘貼圖片的原始數據可以使用，這說明可以從圖片本身著手。
• 開發一種特定的腳本或工具，一鍵將文檔中的圖片轉換為特定的編碼，且此種編碼通用可加載，可以從根本上解決微信公眾號圖片問題。

參考資料

• 菜鳥教程 Window btoa() 方法

版權聲明：本文為「夢幻之心星」原創，依據 CC BY-NC-SA 4.0 許可證進行授權，轉載請附上原文出處鏈接及本聲明。

博客園地址：http://www.rzrgm.cn/Sky-seeker
微信公眾號：關注微信公眾號，獲取即時推送