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

文：Vanier

上次我們談到了如何將二進位的BitmapData點陣圖資料，轉換成base64編碼的文字資料格式表示，所以接著我們就來看看，要如何將base64編碼的字串資料轉換回正常的點陣圖，並且顯示到舞台畫面上。沿用前篇範例的資料內容，先將四張小圖的base64編碼資料存成四個文字檔 – smile.txt、angry.txt、cry.txt、happy.txt，程式的內容包括載入這些文字檔案，然後將載入內容轉換成Binary Code的BitmpaData，最後再將結果顯示在舞台上面。

主要的轉換動作是放在主程式區Base64Test.mxml裏頭，主要是運用Base64Decoder類別的decode()方法函式進行編碼文字的解譯動作，其次引用toByteArray()方法函式，取得該資料的二進位資料值內容

            publicfunctionloadBitmapBase64String(url:String):void{        

                varloader:URLLoader = newURLLoader();

                vardataFormat:String = URLLoaderDataFormat.TEXT;              

                loader.dataFormat = dataFormat;

                configureListeners(loader);

                varrequest:URLRequest = newURLRequest(url);

                try{

                    loader.load(request);

                } catch(error:Error) {

                    trace("Error loading requested document: "+ url);

                }          

            }

            privatefunctioncompleteHandler(event:Event):void{           

                varloader:URLLoader = URLLoader(event.target);

                configureListeners(loader,false);

                   varbyteArr:ByteArray;

                varbase64Dec:Base64Decoder = newBase64Decoder();             

                base64Dec.decode(loader.data);             

                byteArr = base64Dec.toByteArray();

                byteArr.position = 0;

                sampleBoard.drawBase64String(byteArr);

            }

完成文字資料的內容轉換之後，我們獲得了一份ByteArray型態的資料內容，所以接下來的任務就是如何利用二進位格式的資料內容，更進一步轉換成可以顯示的物件資料，而這部份的作業是放在類別PresentBoard.as當中：

        publicfunctiondrawBase64String(data:ByteArray):void{           

            varimage:Image = newImage();

            image.source = data;           

            vartestImage:Image = newImage();

            testImage.width = destBitmap.width;

            testImage.height = destBitmap.height;              

            testImage.addEventListener(Event.COMPLETE,onImagePreLoaded);            

              testImage.load(data);

        }  

        privatefunctiononImagePreLoaded(e:Event):void{                       

            e.target.removeEventListener(Event.COMPLETE,onImagePreLoaded);

            //

            varimg:Image = e.target asImage;         

            vartmpBD:BitmapData =  newBitmapData(img.width,img.height)

            varmatrix:Matrix = newMatrix();        

            tmpBD.draw(img,matrix,null,BlendMode.DARKEN,null,true);

            //

            destBitmap.source = newBitmap(tmpBD);         

        }  

如上面的實做程式碼，首先我們是利用Image物件以load()方式，載入剛剛取得的ByteArray內容，然後再將載入的資料存到一個BitmapData物件當中，並且把它放到指定的Image容器當中，每次選取不同的文字檔案，即可顯示不同的圖形畫面。

範例圖示：點選下拉選單中的檔案名稱，即可載入base64編碼文字內容並且顯示成原來的點陣圖

範例連結：http://www.utrust.com.tw/dispUploadBox/publish/Base64Test.swf

程式原始碼下載：http://www.utrust.com.tw/dispPageBox/WHITESTYLEA_CT2.aspx?ddsPageID=BLOG&&dbid=3470364989

檔名：base64Sample2Source.zip