圖片資料編碼與微信公眾號圖片
阿新 • • 發佈:2021-01-09
---
標題: 圖片資料編碼與微信公眾號圖片
作者: 夢幻之心星 [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*資料就複製到了剪下板。
![Application 圖片轉base64](https://image.sky-seek.tk/file/Pictrue-Bed/img/2021/Image_2021-01-09_12-00-60.jpg)
#### 轉碼方法2
1. 按F12開啟開發者模式
2. 點選**Sources**> **Page**,找到圖片後點擊檔名。在右側的導航欄中右鍵單擊圖片,點選*Copy image as data URI*以複製圖片的*base64*資料。
![Sources 圖片轉base64](https://image.sky-seek.tk/file/Pictrue-Bed/img/2021/Image_2021-01-09_12-01-60.jpg)
#### 轉碼方法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*資料。此項還提供開發人員所需的特殊格式。
![Network response 圖片轉base64](https://image.sky-seek.tk/file/Pictrue-Bed/img/2021/Image_2021-01-09_12-02-60.jpg)
### 圖片檢視器
- 貼上渲染後的內容到微信公眾號,本地圖片載入失敗
- 複製資源管理器中的圖片,在微信公眾號中選中貼上失敗的圖片,按Ctrl+V進行粘貼後無反應。圖片替換失敗。
![圖片資料來源測試](https://image.sky-seek.tk/file/Pictrue-Bed/img/2021/Image_2021-01-09_12-03-60.jpg)
- 用畫圖工具開啟圖片,按Ctrl +A以全選圖片,按Ctrl+C以複製圖片,在微信公眾號中選中貼上失敗的圖片,按Ctrl+V進行粘貼後圖片替換成功。
- 用*XnView MP*開啟圖片,按Ctrl+C以複製圖片,在微信公眾號中選中貼上失敗的圖片,按Ctrl+V進行粘貼後圖片替換成功。**在沒有使用自動化工具的情況下,這種方式是除了使用微信公眾號支援的圖床以外比較快的一種方式**。
![圖片原始資料替換](https://image.sky-seek.tk/file/Pictrue-Bed/img/2021/Image_2021-01-09_12-04-60.jpg)
## 後記
- 在*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)
微信公眾號:關注微信公眾號,獲取即時推送
![微信名:夢幻之心星 微訊號:Sky-seeker](https://cdn.jsdelivr.net/gh/Sky-seeker/Pictrue-Bed/img/Sky-seeker_WX_300x109.jpg)
-------------------------------------------