4 Replies Latest reply on May 21, 2010 8:01 AM by vivoices

    Downloading and Saving Image in FB4 / AIR app

    vivoices Level 1

      I download and display an Image successfully in an Flash Builder 4 / AIR application.

      The app also saves the downloaded ByteArray to a local drive.

      protected function creationCompleteHandler( event:FlexEvent ):void
      {
           var loader:Loader = new Loader();
           var file:File = new File();
           loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
           var request:URLRequest = new URLRequest( "http://. . . /01-Cafe.jpg" );
           loader.load( request );
      }
      
      private function imageLoaded( event:Event ):void
      {
           // displaying the image
           this.testImg.source = event.target.content;
      
           // saving the image file
           var fs:FileStream = new FileStream();
           var path:File = new File( File.desktopDirectory.nativePath + File.separator + "01-Cafe.jpg" );
           fs.openAsync( path, FileMode.WRITE );
           fs.writeBytes( event.target.bytes, 0, event.target.bytes.bytesAvailable );
           fs.close();
      }
      

      trying to open the saved file in Photoshop CS4 gives the following error:

      "Could not complete your request because an unknown or invalid JPEG marker is found."

      IrfanView opens the file inside a Flash Player.

       

      The app that saved the file can load it and display.

       

      What does the download do to the data of the JPEG file?

      How can I save a valid JPEG file from the Loader's ByteArray?

       

      Thanks,

      David

        • 1. Re: Downloading and Saving Image in FB4 / AIR app
          Anirudh Sasikumar Adobe Employee

          Hi,

           

          A Loader's bytearray will have the image in a bitmap format. You will have to encode it to JPG or PNG.

           

          You can use the PNGEncoder/JPGEncoder class to do this.

           

          Take a look at http://henryjones.us/articles/using-the-as3-jpeg-encoder

           

          Thanks,

          Anirudh

          • 2. Re: Downloading and Saving Image in FB4 / AIR app
            vivoices Level 1

            Thanks for your reply,

            A Loader's bytearray will have the image in a bitmap format.

            That is incorrect.

            I found one solution by searching the ByteArray for the JPEG file header (it is some 40+ bytes inside the array).

             

            private function loadImage(  ):void
            {
                 var loader:Loader = new Loader();
                 var file:File = new File();
                 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
                 var request:URLRequest = new URLRequest( "http://www. . ./00-Counter1.jpg" );
                 loader.load( request );
            }
            
            private function imageLoaded( event:Event ):void
            {
                 this.testImg.source = event.target.content;
                 
                 // search for the beginning of the JPEG File Header
                 var testBa:ByteArray = new ByteArray();
                 var imageBa:ByteArray = event.target.bytes;
                 for( var i:uint = 0; i < imageBa.bytesAvailable; i++ ) {
                      imageBa.position = i;
                      imageBa.readBytes( testBa, 0, 4);
                      if( testBa.readUTFBytes(4) == "JFIF" ) {
                           var jpegHeaderStartPosition:uint = i - 6;
                           break;
                      } else {
                           testBa.clear();
                      }
                 }
                 
                 // saving the file
                 var fs:FileStream = new FileStream();
                 var path:File = new File( File.desktopDirectory.nativePath + File.separator + "test.jpg" );
                 fs.openAsync( path, FileMode.WRITE );
                 fs.writeBytes( imageBa, jpegHeaderStartPosition, event.target.bytesLoaded );
                 fs.close();
            }
            

            This saves the proper JPEG format downloaded from the server.

            The Loader adds another header and something more to the end of the original file-data.

             

            My method is very inconvenient and maybe unreliable (have tested it only on a few images)

             

            Maybe someone can suggest a better method?

            • 3. Re: Downloading and Saving Image in FB4 / AIR app
              Anirudh Sasikumar Adobe Employee

              >That is incorrect.

               

              Sorry, my mistake. I meant Bitmap(event.target.content).bitmapData. Converting that to a JPG will require JPGEncoder.

               

              Interesting to know that LoaderInfo.bytes has additional bytes at the beginning.

               

              Could you not just use URLLoader to get the bytes of the JPG, save that into another bytearray before passing it onto Loader.loadBytes to display the image?

               

              Cheers,

              Anirudh

              • 4. Re: Downloading and Saving Image in FB4 / AIR app
                vivoices Level 1

                Thanks Anirudh,

                the event.target.data: ByteArray of the URLLoader has indeed the same byte count as the original jpeg file.

                 

                David