將圖片編碼成字串：MIME與Base64編碼
如果要編寫一個圖文並茂的網頁，往往會覺得要找一個可以擺放「圖片」的空間是一件很麻煩的事情。特別是最近我在學習寫userscript的時候，想把套件跟圖片顯示結合在一起，又得要考慮怎麼連結圖片，感到非常頭大。
後來參考了GReader Favicon Alerts的寫法，我才知道原來還有將圖片轉換成Base64編碼，然後直接跟純文字的HTML或JavaScript結合在一起的作法！（備註：IE6不行喔）
MIME
根據維基百科的記載：
多用途網際網路郵件擴展（MIME，Multipurpose Internet Mail Extensions）是一個網際網路標準，它擴展了電子郵件標準，使其能夠支持非ASCII字元、二進制格式附件等多種格式的郵件消息。
MIME是由[type]/[subtype]組成。常見的[type]有「text」、「image」、「application」。我們在寫作網頁時，常常看到「image/png」、「text/html」、「text/javscript」之類的格式，這就是MIME喔！
網路上常見的圖片MIME則是「image/jpeg」、「image/gif」跟「image/png」。
Base64編碼
根據維基百科的記載：
Base64是一種使用64基的位置計數法。它使用2的最大次方來代表僅可列印的ASCII 字元。這使它可用來作為電子郵件的傳輸編碼。在Base64中的變數使用字元A-Z、a-z和0-9 ，這樣共有62個字元，用來作為開始的64個數字，最後兩個用來作為數字的符號在不同的系統中而不同。
圖片是屬於二進制的檔案，因此不能像HTML或JavaScript這種純文字(plain text)的程式一樣地處理。
舉例來說，上圖中，我以處理純文字的筆記本開啟「1422855-medium2.gif」這個檔案，看到的結果是一堆亂碼。也就是說，一般的純文字處理器是無法處理圖片這種二進制的檔案。
而透過電腦將圖片轉換成Base64編碼之後，資料會成為由英文跟數字組成的純文字資料，如下所示：
這一張圖片的大小為2.01KB，轉換成Base64編碼之後共有2753字元。儘管檔案大小變大了，但這種Base64編碼卻能更方便地使用。
如何將圖片轉換成Base64編碼？
很多程式語言都可以做到將圖片轉換成Base64編碼的工作，而網路上也有許多提供這種服務的網站，例如Binary File to Base64 Encoder / Translator。
操作步驟也很簡單，只要指定圖片的網址，然後就可以取得Base 64編碼了。
1. 指定網址
輸入後按右邊的「提交」(submit)。
2. 取得編碼結果
這個網站會自動地加入MIME格式。你可以注意到除了Base 64編碼之外，開頭還有「data:image/gif;base64,……」的檔頭訊息。
如何利用圖片的Base 64編碼？
不知道有沒有人發現到，開頭這張圖片，其實就是用MIME與Base 64編碼來顯示的喔。
作法一樣是用<img>標籤，但裡面的src屬性卻是指定MIME與Base 64的資料內容。我將程式碼的部份擷取如下：
<img src="data:image/gif;base64,R0lGO……ZTVsGBAA7">
一般的src屬性通常是指定「http://」開頭的網址，但在此卻是使用「data:image/gif;base64,」開頭的MIME與Base 64編碼，而瀏覽器卻也能正常地開啟。
IE6不支援
好吧，舊時代的產物IE6並不支援MIME與Base 64編碼顯示圖片的作法就是了。使用的時候請自己注意一下喔。
以MIME與Base 64編碼儲存圖片的好處
將圖片轉換成這種純文字的方式儲存有幾個好處：
- 一份圖文並茂的文件不用切割成很多份檔案（通常是一份html與數張圖片檔案），全部只要用MIME與Base 64編碼來儲存在一份HTML檔案即可。
- 對userscript這種JavaScript的套件來說也是如此。我只要把圖片的MIME與Base 64編碼寫在JavaScript中，就不需要外連，就像是GReader Favicon Alerts一樣。
- 以MIME與Base 64展示的圖片被視為「同網域」，不會受到「跨網域」的限制，因此就可以做到利用MIME與Base 64圖片再來加工繪圖的功能。
結語
學到這種作法之後，我的網頁設計跟AJAX應用又開拓了一條廣闊的道路。在此也將這種喜悅分享給大家，一起努力學習吧！
另外分享一個工具：Image to Base64 converter
回覆刪除http://webcodertools.com/imagetobase64converter
可以將圖片上傳並轉換成Base64，好用