7 Replies Latest reply on May 7, 2009 10:18 AM by live2_Learn

    How to load and display a byte array (jpeg) image file dynamically in Flex?

    live2_Learn Level 1

      My web service client (servlet) received a binary jpeg data from an Image Server. The Flex application invokes the

      servlet via HttpService and receives the binary jpeg data as byte array.  How could it be displayed dynamically

      without writing the byte array to a jpeg file?  Please help (some sample code is very much appreciated).

        • 2. Re: How to load and display a byte array (jpeg) image file dynamically in Flex?
          Muzak Level 3

          JPEGEncoder is only useful for converting BitmapData to ByteArray, not the other way around.

          By the way JPEGEncoder and PNGEncoder are part of the Flex SDK now, so no need to use AS3Lib (alltough it's a good library to have around).

           

          To display/use a ByteArray as image, use a Loader instance with the loadBytes method.

           

              Loader.loadBytes(bytes:ByteArray, context:LoaderContext = null);

           

           

           

          Listen for the complete event on the Loader.contentLoaderInfo and get the BitmapData in the event handler.

           

          private function loadJpeg():void {

              var loader:Loader = new Loader();

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

              //jpgBA is the ByteArray loaded from webservice

              loader.loadBytes(jpgBA);

          }

           

           

           

           

           

           

           

          private function loaderCompleteHandler(evt:Event):void {

           

           

              var t:LoaderInfo = evt.currentTarget as LoaderInfo;

              // display the jpeg in an Image component

              img.source = t.content;

           

           

          }

           

           

          <mx:Image id="img" scaleContent="false" />

          • 3. Re: How to load and display a byte array (jpeg) image file dynamically in F
            Boy Carper Level 1

            sorry, you're right. Wasn't paying enough attention

            • 4. Re: How to load and display a byte array (jpeg) image file dynamically in Flex?
              live2_Learn Level 1

              Thanks for the very helpful information. I am new to Flex. I will try to

              digest this information, try the sample code and hopefully display the

              jpeg image successfully.  Will keep you posted.

              • 5. Re: How to load and display a byte array (jpeg) image file dynamically in Flex?
                live2_Learn Level 1

                I am getting "Error #1034: Type Coercion failed: cannot convert "[B@61a414" to flash.utils.ByteArray". If I commented "loadJpeg()", the name and date of birth came across fine. Is loadJpeg() in the right spot? Please advise.  Here is my code:

                 

                <?xml version="1.0" encoding="utf-8"?>

                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

                  <mx:Script>

                  <![CDATA[

                    import mx.core.ByteArrayAsset;

                    import mx.controls.Alert;

                    import mx.rpc.events.FaultEvent;

                    import mx.rpc.events.ResultEvent;

                                

                   

                    public var resultObj:Object = {};

                 

                    private function submit_click(event:MouseEvent):void{

                     var param:Object = {};

                     param["licNo"] = licNo.text;

                     imageService.send(param);

                    }

                                

                    private function resultHandler(event:ResultEvent):void{

                     resultObj = event.result;

                      //Is this the correct spot for this function call ???

                     loadJpeg();

                    }

                                

                    private function loadJpeg():void{

                     var loader:Loader = new Loader();

                     loader.contentLoaderInfo.addEventListener(Event.COMPLETE,

                                                               loaderCompleHandler);

                      //byte array loaded from web service

                     loader.loadBytes(resultObj.drivers.driver.image);

                    }

                                

                    private function loaderCompleteHandler(evt:Event):void{

                      .........

                    }

                                

                    private function faultHandler(event:FaultEvent):void{

                     Alert.show(event.toString(), event.type);

                    }

                  ]]>

                  ");

                out.close();

                • 6. Re: How to load and display a byte array (jpeg) image file dynamically in Flex?
                  Muzak Level 3

                  Yup your code looks fine.

                  It seems that the loaded data is not of type ByteArray.

                  Since you're using an HTTPService, the ByteArray might be a String or even Base64 encoded.

                   

                  So you should look into what data type the image data arrives in.

                  In the result event handler, try:

                   

                       trace("image data: ", event.result.drivers.driver.image);

                       trace("is ByteArray: ", event.result.drivers.driver.image is ByteArray);

                   

                  If the data is base64 encoded, look into the Base64Decoder class:

                   

                  mx.utils.Base64Decoder

                  http://livedocs.adobe.com/flex/3/langref/mx/utils/Base64Decoder.html

                  • 7. Re: How to load and display a byte array (jpeg) image file dynamically in Flex?
                    live2_Learn Level 1

                    Thanks for the help. It sure makes learning Flex much more fun. Finally the image is rendered successfully. As you suggested, I encoded the image byte array on the server side and decoded it in Flex. Viola! It is a good feeling

                    to see the result.

                    Also for anyone looking for a tracing tool, I came across one called "ServiceCapture". It captures all HTTP traffic sent from your browser or IDE. I find it to be very convenient and helpful.  Cheers!