AIRのSQLiteで画像を格納したり表示する方法
SQLiteでも画像を格納したり取り出して表示とかしてみたい。
ってことでやってみました。
動作ムービーはこちら
結局のところ画像データをテキストでデータベースへ保存するしかないっぽくてBase64ってメールでも使われているものを使用します。
ロードデータをBase64へエンコード
var enc:Base64Encoder = new Base64Encoder();
enc.encodeBytes(ByteArray(URLLoader(e.target).data));
Base64なテキストデータをデコード
var dec:Base64Decoder = new Base64Decoder(); dec.decode(myData[0].image_txt); ldr.loadBytes(ByteArray(dec.flush()));
#将来的にPNGdecodeやJPGdecodeがでてくれるといいなぁ。
#しかもBase64形式をサポートして。
ソースコードはこちら
<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="817" height="502" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.utils.Base64Decoder; import mx.utils.Base64Encoder; private var conn:SQLConnection; private var stmt:SQLStatement; //初期化関数 private function init():void{ //データベースの設定 setDB(); //データベースから既存データの表示 getData(); } /******************************* DB初期設定 ********************************/ //データベースコネクト private function setDB():void{ //データベースファイルを作成 var dbfile:File = File.desktopDirectory; dbfile = dbfile.resolvePath("sqliteImage.db"); conn = new SQLConnection(); conn.open(dbfile); //DBテーブル初期作成 createDB(); } //データベース作成 private function createDB():void{ //データベースを作成 stmt = new SQLStatement(); stmt.sqlConnection = conn; stmt.text = " CREATE TABLE IF NOT EXISTS sqliteImage ( " + " id INTEGER PRIMARY KEY , " + " image_txt TEXT , " + " print INTEGER ) ; "; stmt.addEventListener(SQLEvent.RESULT , function():void{}); stmt.execute(); } /******************************* 本データ表示・追加・削除 ********************************/ //データ表示 private function getData():void{ //データベースから表示 stmt = new SQLStatement(); stmt.sqlConnection = conn; stmt.text = " SELECT * FROM sqliteImage ORDER BY id DESC "; //SQL完了イベント stmt.addEventListener(SQLEvent.RESULT , function():void{ //結果セットをオブジェクトに入れる var myData:Object = new Object(); myData = stmt.getResult().data; if( myData != null){ //データをロードしてBase64へデコード var ldr:Loader = new Loader(); var dec:Base64Decoder = new Base64Decoder(); dec.decode(myData[0].image_txt); ldr.loadBytes(ByteArray(dec.flush())); //ステージにaddChild myImageOut.addChild(ldr); myLog3.text = myData[0].image_txt; dg.dataProvider = myData; } }); try{ stmt.execute(); }catch(e:SQLError){ myLog2.text = "error1"; } } //データーの追加 private function addData():void{ //バイナリデータとしてロード var urlldr:URLLoader = new URLLoader(); urlldr.dataFormat = URLLoaderDataFormat.BINARY; //ロード完了イベント urlldr.addEventListener(Event.COMPLETE, function(e:Event):void{ //ロードデータをBase64へエンコード var enc:Base64Encoder = new Base64Encoder(); enc.encodeBytes(ByteArray(URLLoader(e.target).data)); //データベースへ挿入 stmt = new SQLStatement(); stmt.sqlConnection = conn; stmt.text = " INSERT INTO sqliteImage( image_txt )VALUES( '" + enc.flush() + "' )"; myLog.text += stmt.text; stmt.addEventListener(SQLEvent.RESULT , function():void{ getData(); } ); try{ stmt.execute(); }catch(e:SQLError){ myLog2.text = "error2"; } }); //ロード開始 urlldr.load(new URLRequest("19.jpg")); } ]]> </mx:Script> <mx:Button x="132" y="51" label="データベースに画像を追加" click="addData()" height="59"/> <mx:Image x="10" y="51" width="105" height="121" id="myImage" source="19.jpg"/> <mx:Image x="10" y="206" width="105" height="121" id="myImageOut"/> <mx:TextArea x="294" y="51" width="248" height="203" id="myLog"/> <mx:TextArea x="294" y="288" width="248" height="53" id="myLog2"/> <mx:TextArea x="550" y="51" width="255" height="203" id="myLog3"/> <mx:Label x="294" y="25" text="INSERT"/> <mx:Label x="550" y="25" text="SELECT"/> <mx:Label x="294" y="262" text="ERROR"/> <mx:Label x="10" y="25" text="入力画像"/> <mx:Label x="10" y="180" text="出力画像"/> <mx:DataGrid x="550" y="262" width="255" height="202" id="dg" rowHeight="30"> <mx:columns> <mx:DataGridColumn headerText="列 1" dataField="id"/> <mx:DataGridColumn headerText="列 2" dataField="image_txt"/> <mx:DataGridColumn headerText="列 3" dataField="print"/> </mx:columns> </mx:DataGrid> </mx:WindowedApplication>