8 Replies Latest reply on Oct 27, 2009 11:26 AM by BoydMills

    image files from sql

    BoydMills

      Hi,

       

      I loaded the contents of image files into an sql database.

      Then wrote a web service to read those blocks of binary data.

      Wrote the Flex interface to call the web service to get the data.

      The web service also returns string parameters, which end up in the flex application correctly.

      The binary block of data that originated in an image file appears to be presented to the flex application correctly.

       

      Now how do I get the flex app to display the image?

      Simplified for the sake of space:

       

       

       

       

       

       

       

      private function BellGetImagesResult(event:ResultEvent):

      void

      {

       

       

         var i:int = 0;

       

       

         while ( event.result[i] )

            BellImageAdd( event.result[i].acAlarmType, event.result[i].Image, event.result[i].FileExtension);

      }

       

       

      private function BellImageAdd( acAlarmType:String, Image:Object, FileExtension:String ):void

      {

      source = Image;

      }

       

      But this works:

      source =

      'assets/images/thermometer.gif';

      where the file  thermometer.gif resides at the server

       

       

      I am obviously missing something, where to look?

        • 1. Re: image files from sql
          Subeesh Arakkan Level 4

          You need to convet the ByteArray to BitmapData to use it as image source. "loadBytes" method of the Loader class can be used for this.

           

          import flash.display.Loader;

          import flash.display.LoaderInfo;
          import flash.events.Event;
          import flash.display.BitmapData;

          var loader:Loader = new Loader();
          loader.loadBytes(byteArray);
          loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

          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);
              // result: bitmapData
          }

          Check this blog also
          • 2. Re: image files from sql
            BoydMills Level 1

            Subeesh,

             

            Thank you for the response.

             

            It is certainly in the right direction.

             

            However the files I have to display are .gif, .png, and .swf.  Sadly, no bitmaps.

             

            the import: mx.controls.Image;

             

             

             

             

             

             

             

             

            in the actionscript file does a good job of loading external files from the server directory where the original .swf file was executed.  All the program has to do is change the name of the "source" variable and the image "magically" appears!

             

            I am trying to use that as a model.  Maybe a bad idea.

             

            So I have the contents of the files ( .gif, .png, .swf ) and I have the text file extension that the content came from.

             

            I was hoping there is some "standard" or "easy for a novice program" way of presenting the bytearray and image-type to some subsystem and instruct it to display the image.

             

            Hoping for too much?

             

            What's the best approach ?

             

             

             

             

             

            • 3. Re: image files from sql
              BoydMills Level 1

              I have a problem before I can get to the problem I set out to find.

               

              First for the original problem.

               

              It seems as though the solution provided by Subeesh may very well work for the file types I am using.

               

              But my problem now is that haveing retrieved the image contents by way of a web service, the image information seems to have been converted into some sort of HEX-ASCII representation.  I presume this is a SOAP thing.  Anyway, this can't be a unique problem.

               

              So how do I convert the received block of "binary" data back to true binary?

              • 4. Re: image files from sql
                BoydMills Level 1

                So every second I run this code:

                =====================================

                 

                 

                 

                 

                 

                 

                 

                var image:String = BellImages.result[index].Image;

                 

                 

                var decoder:Base64Decoder = new Base64Decoder();

                var decoded:ByteArray;

                 

                decoder.decode( image );

                 

                 

                decoded = decoder.toByteArray( );

                 

                BellImageMakeAssignment( decoded );

                 

                 

                return;

                 

                 

                 

                 

                 

                private function BellImageMakeAssignment( lclImage:ByteArray ):

                void

                {

                 

                 

                var loader:Loader = new Loader();

                loader.loadBytes(lclImage);

                loader.contentLoaderInfo.addEventListener( Event.COMPLETE, BitMaploaderComplete);

                }

                 

                 

                 

                 

                 

                 

                 

                 

                private function BitMaploaderComplete( event:Event ):

                void

                {

                 

                 

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

                 

                 

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

                bitmapData.draw(loaderInfo.loader);

                 

                 

                }

                ===============================

                 

                From what I can tell, the bitmapData.draw fundtion is given the exact same data as was extracted from the database.  Yet nothing appears!!!

                 

                I suspect the issue is because the entire class is defined as:

                 

                 

                 

                ( public class BellBase extends Image )

                 

                 

                 

                 

                 

                Yet within the same class, the following line:

                 

                 

                 

                 

                ( source =

                 

                 

                 

                'assets/images/tool.gif' )

                 

                works just fine!

                 

                Ok, now what?

                 

                 

                 

                • 5. Re: image files from sql
                  Zolotoj Level 3

                  I dont know if that helps but here is how I get a dynamic image from the server into Flex:

                   

                  var loader:URLLoader = new URLLoader();

                  loader.dataFormat = "binary";

                  loader.addEventListener(Event.COMPLETE, completeHandler);

                  var request:URLRequest =

                  new URLRequest(urlString);

                  loader.load(request);

                   

                  private function completeHandler(event:Event):void

                  {

                      preview.data = event.target.data;

                  }

                   

                  <mx:Panel borderStyle="outset" width="35%" height="100%" dropShadowVisible="true"

                    headerHeight="0" backgroundColor="#D6F3F6" paddingBottom="0">

                  <mx:Image width="228" height="576" id="preview"/>

                  </mx:Panel>

                  • 6. Re: image files from sql
                    BoydMills Level 1

                    I went reading through the source code for base class Image. Since my class is an extension of base class Image, I can change the "image" being displayed in 2 ways: 1 set variable "source" to the name of a file on the file server 2 set the variable "data" to a buffer containing the byte array contents of such a file. But to successfully manipulate the display using the "data" approach, one should also set "source" to null. so this works: var  image:String =  BellImages.result[index].Image; // an array or images returned by the web service, which read the images from the sql var decoder:Base64Decoder = new Base64Decoder(); var decoded:ByteArray;       decoder.decode( image ); decoded = decoder.toByteArray( ); data = decoded;  // set data variable of base class Image

                    • 7. Re: image files from sql
                      Zolotoj Level 3

                      <one should also set "source" to null

                      I am not doing that.

                      • 8. Re: image files from sql
                        BoydMills Level 1

                        Zolotoj,

                         

                        I assume what you mean by that is that you do not set "source" to null,

                        but that the image still displays.

                         

                        That is true.

                         

                        If you look into the source code for the definition of the "Image" class

                        you will see that it does things differently based on whether or not

                        "source" is set to null when you set the "data" value.

                         

                        That is why I used the qualifier "should": having looked at the Image

                        source code, I want it to make decision A instead of decision B.

                         

                        I suppose some day I will investigate what the difference is but for

                        now, things work as I want.

                         

                        Having said that, I assume the Image constructor sets "source" to null

                        anyway, making it a moot point.  So I assume that by not explicitly

                        setting "source" you leave it at the default value of null.

                         

                         

                        Regards,

                        Boyd