:::

將圖片編碼成字串:MIME與Base64編碼

如果要編寫一個圖文並茂的網頁,往往會覺得要找一個可以擺放「圖片」的空間是一件很麻煩的事情。特別是最近我在學習寫userscript的時候,想把套件跟圖片顯示結合在一起,又得要考慮怎麼連結圖片,感到非常頭大。

後來參考了GReader Favicon Alerts的寫法,我才知道原來還有將圖片轉換成Base64編碼,然後直接跟純文字的HTML或JavaScript結合在一起的作法!(備註:IE6不行喔)


MIME

根據維基百科的記載

多用途網際網路郵件擴展MIMEMultipurpose 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)的程式一樣地處理。

image

舉例來說,上圖中,我以處理純文字的筆記本開啟「1422855-medium2.gif」這個檔案,看到的結果是一堆亂碼。也就是說,一般的純文字處理器是無法處理圖片這種二進制的檔案。

而透過電腦將圖片轉換成Base64編碼之後,資料會成為由英文跟數字組成的純文字資料,如下所示:

這一張圖片的大小為2.01KB,轉換成Base64編碼之後共有2753字元。儘管檔案大小變大了,但這種Base64編碼卻能更方便地使用。

如何將圖片轉換成Base64編碼?

image

很多程式語言都可以做到將圖片轉換成Base64編碼的工作,而網路上也有許多提供這種服務的網站,例如Binary File to Base64 Encoder / Translator

操作步驟也很簡單,只要指定圖片的網址,然後就可以取得Base 64編碼了。

1. 指定網址

image

輸入後按右邊的「提交」(submit)。

2. 取得編碼結果

image

這個網站會自動地加入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不支援

image

好吧,舊時代的產物IE6並不支援MIME與Base 64編碼顯示圖片的作法就是了。使用的時候請自己注意一下喔。

以MIME與Base 64編碼儲存圖片的好處

將圖片轉換成這種純文字的方式儲存有幾個好處:

  1. 一份圖文並茂的文件不用切割成很多份檔案(通常是一份html與數張圖片檔案),全部只要用MIME與Base 64編碼來儲存在一份HTML檔案即可。
  2. 對userscript這種JavaScript的套件來說也是如此。我只要把圖片的MIME與Base 64編碼寫在JavaScript中,就不需要外連,就像是GReader Favicon Alerts一樣。
  3. 以MIME與Base 64展示的圖片被視為「同網域」,不會受到「跨網域」的限制,因此就可以做到利用MIME與Base 64圖片再來加工繪圖的功能。

結語

學到這種作法之後,我的網頁設計跟AJAX應用又開拓了一條廣闊的道路。在此也將這種喜悅分享給大家,一起努力學習吧!

總共1 則留言, (我要發問)

  1. 另外分享一個工具:Image to Base64 converter
    http://webcodertools.com/imagetobase64converter

    可以將圖片上傳並轉換成Base64,好用

    回覆刪除

留言工具: