--- 標題: 圖片資料編碼與微信公眾號圖片 作者: 夢幻之心星 [email protected] 標籤: [#圖片,#資料編碼,#Base64] 目錄: [資料編碼] 日期: 2021-01-09 --- ## 背景說明 - 使用工具將圖片轉換為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() 方法](https://www.runoob.com/jsref/met-win-btoa.html) ------ 版權宣告：本文為「[夢幻之心星](https://www.cnblogs.com/Sky-seeker)」原創，依據 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) 許可證進行授權，轉載請附上原文出處連結及本宣告。 ------ 部落格園地址：[https://www.cnblogs.com/Sky-seeker](https://www.cnblogs.com/Sky-seeker) 微信公眾號：關注微信公眾號，獲取即時推送  -------------------------------------------