4 Replies Latest reply on Jun 15, 2011 11:39 AM by yyterrwihbgd

    Problem displaying base64 encoded images in a datagrid

    yyterrwihbgd

      Hi,

          I have a number of thumbnail images (8K ish in length), stored in a sqlite database, encoded as base64 strings.

       

      I would like to retrieve these images and present them into a datagrid (along with some other information from the DB)

       

      The retrieval of information from the database works, but I cannot quite "see" how to connect the decoded images (result) from the database to the datagrid, to display the images.

       

      Below is some code, where I show (to simplify things) a simple DGrid and want to use the dataprovider to point to the select statement from the DB

       

      Any details to show how I need to change this code would be greatly appreciated:-)

       

       

            <mx:DataGrid id="dg2" dataProvider="{dp2}">

              <mx:columns>

                <mx:DataGridColumn headerText="Image"  dataField="image"  width="150"/>

              </mx:columns>

            </mx:DataGrid>

       

      The code to generate the dp2 information is as follows.

      The result2 array is populated as expected and ldr appears to be populated, but imageBMap and (therefore) dp2 are null:-(

       

       

       

              sql2.text = "SELECT image FROM  bookMarks;";

              sql2.execute();


              var result2:SQLResult = sql2.getResult();       

              var data2:Array = result2.data;

                  

              var base64Dec:Base64Decoder;

              var byteArr:ByteArray;

              var bmap:Bitmap;

              var ldr:Loader = new Loader();

              base64Dec = new Base64Decoder();

             

             

              if(result2.data != null)

              {

                var numRows:int = result2.data.length;


                for(var i:int = 0; i < numRows; i++)

                {

                  for(var columnName:String in result2.data[i])

                  {

                    if(columnName == "image") // Normally there will be more than 1 column in the select, hence this check

                    {

                      base64Dec.decode(result2.data[i][columnName]);

                      byteArr = base64Dec.toByteArray();               

                      ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);               

                      ldr.loadBytes(byteArr);

                    }

                  }

                }

              }

              var imageBMap:Bitmap = Bitmap(ldr.content);

              dp2 = ArrayCollection(imageBMap);

            }

             

            private function loaderComplete(event:Event):void

            {

              var loaderInfo:LoaderInfo = LoaderInfo(event.target);

              var bitmapData:BitmapData = new BitmapData(loaderInfo.width, loaderInfo.height, false, 0xFFFFFF);

              bitmapData.draw(loaderInfo.loader);       

            }