電子書製作淺談Base64編碼之應用(上)

最近在製做信諾科技電子書介面時需要解決有關Flex存取圖檔的問題，剛好遇到需要跟資料庫進行串連的應用需求；一般的做法可能是直接把圖檔存成獨立檔案，然後再將其路徑寫入資料庫，待下次需要時，先從資料庫讀取路徑後再進行實際載入的動作。雖然這種方式的實做不難，但一想到每次都要分成兩段式來處理，其實蠻不直觀的，如果能夠直接將圖檔資料存入資料庫，然後直接做讀取、寫入的話，豈不是更加方便？當然如果是直接把binary二進位的圖存入資料庫，雖然可行但顯然不怎麼實用，那若是能夠把圖檔當成文字模式來處理呢？又能讓檔案存取的步驟簡化？於是我找到了Base64。
什麼是Base64？根據維基百科的定義是這麼寫的：「Base64是一種使用64基(2⁶)的位置計數法。它使用2的最大次方來代表僅可打印的ASCII 字符。…」，意思是Base64使用了字元A-Z、a-z和0-9共62個字元來表示開始的變量，而最後結束的兩個代表數值的符號則視不同系統而有所差異(例如windows系統以’=’結尾)。簡單地說，就是我們可以將Base64拿來做為一種資料格式轉換模式，比如把binary二進位的數據以Base64編碼方式，轉譯成ASCII字元符號的表示方式，以字串格式的資料型態來做應用。
所以運用base64編碼工具基本上應該可以達到我的需求，而且Flex也提供了相關的類別工具。操作的原理跟步驟很簡單，首先把Bitmap Data的圖檔資料格式轉換成by nary資料型態，然後應用Base64Encoder類別的encode Bytes()方法，進行base64編碼，即可以二進位的binary資料轉換成base64編碼的字串資料型態了。
在範例中的圖檔資料的轉換，主要是由getImageBase64String()函式處理：

private function getImageBase64String(disp:BitmapData):String{

         var imgEnc:PNGEncoder = new PNGEncoder();

         var bitmapData:BitmapData = new BitmapData(disp.width, disp.height, true, 0);

         bitmapData.draw(disp);

         var bytes:ByteArray = imgEnc.encode(bitmapData);

         var b64encoder:Base64Encoder = new Base64Encoder();

         b64encoder.encodeBytes(bytes);                                    

         var imageString:String = b64encoder.flush();

         return imageString;

}

上述函式中，因為處理的圖檔格式為.PNG，所以我們宣告了一個PNGEncoder類別物件，並呼叫該物件的encode()函式做Bitmap Data與binary資料型的轉換，而且新建一個Bitmap Data複本資料當做被轉換的對象，避免資料來源受到影響。接下來宣告一個Base64Encoder類別的編碼物件，使用encode Bytes()函式將轉換好的二進位binary資料編碼成base64格式的內容，然後呼叫flush()函式將編碼物件的內容資料寫入一個字串變數裏頭，最後將該字串結果回傳給函式的呼叫者。
範例圖示：點選左方不同圖案即可出現對應的base64編碼文字字串

是不是非常輕鬆簡單呢？Base64成就了另一種解決圖、文轉換加密的解決方案。
其應用範圍包括：

1.            網路傳輸

2.            簡單的加密

3.            資料型態的轉換

範例動畫   程式原始碼