圖片Base64編碼

標籤：插入   程式   style   表示   自己   nbsp   jquery外掛程式   控制項   轉化   

　　我們經常在做Jquery外掛程式的時候需要插入一些自訂的控制項，比如說按鈕，而我們自己又覺著button標籤很醜，而且不同瀏覽器顯示的效果還不一樣，這個時候我們需要用到圖片，當然，我們可以通過img標籤添加src，這個時候我們需要jpg、png、gif等格式的圖片相匹配，這樣的話，需要添加額外的檔案，使得這個檔案的可移植性變差，這個時候我們就可以將圖片轉為Base64編碼，即將圖片轉化為字元方式放在html檔案中。

　　Base64編碼要求把每三個8Bit的位元組轉換為四個6Bit的位元組（3*8 = 4*6 = 24），然後把6Bit再添兩位高位0，組成四個8Bit的位元組，也就是說，轉換後的字串理論上將要比原來的長1/3。沒76個字元1需添加一個分行符號，當原文的字元不是3的倍數，原文剩餘的位元組根據編碼規則繼續單獨轉(1變2,2變3;不夠的位元用0補全)，再用=號補滿4個位元組。這就是為什麼有些Base64編碼會以一個或兩個等號結束的原因，但等號最多隻有兩個。所以當原文除以3在任何情況下都只可能是0，1，2這三個數中的一個。如果餘數是0的話，就表示原文位元組數正好是3的倍數（最理想的情況）。如果是1的話，轉成2個Base64編碼字元，為了讓Base64編碼是4的倍數，就要補2個等號；同理，如果是2的話，就要補1個等號。

　　關於Base64字元編碼網路上有很多教程。我這裡主要介紹如何將圖片轉為Base64編碼，用到JS或者Html代碼中，其實用過PHP的程式猿都知道這個其實很簡單，PHP內建函數file_get_contents將上傳的圖片轉為字串類型，然後通過base64_encode就可以將字串轉為相應的Base64編碼。

　　

1 string file_get_contents ( string $filename [, bool $use_include_path = false [, resource $context [, int $offset = -1 [, int $maxlen ]]]] )2 3 string base64_encode ( string $data )

 

　　通過以上兩個函數就可以將圖片轉為了Base64碼了，然後html可以通過CSS樣式表來載入Base64碼。

　　

.image{    width:4px;    height:8px;     background-image:url(data:image/png;base64,Base64碼);}

 

　　下面是我自己做的一個圖片轉Base64碼的工具，具體實現方式就和上面講的一樣。

　　圖片轉Base64碼工具

　　

圖片Base64編碼