最近在製做信諾科技電子書介面時需要解決有關Flex存取圖檔的問題,剛好遇到需要跟資料庫進行串連的應用需求;一般的做法可能是直接把圖檔存成獨立檔案,然後再將其路徑寫入資料庫,待下次需要時,先從資料庫讀取路徑後再進行實際載入的動作。雖然這種方式的實做不難,但一想到每次都要分成兩段式來處理,其實蠻不直觀的,如果能夠直接將圖檔資料存入資料庫,然後直接做讀取、寫入的話,豈不是更加方便?當然如果是直接把binary二進位的圖存入資料庫,雖然可行但顯然不怎麼實用,那若是能夠把圖檔當成文字模式來處理呢?又能讓檔案存取的步驟簡化?於是我找到了Base64。 什麼是Base64?根據維基百科的定義是這麼寫的:「Base64是一種使用64基(26)的位置計數法。它使用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. 資料型態的轉換