Downloading and Saving Image in FB4 / AIR app

[vivoices]

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

[Anirudh Sasikumar]

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

[vivoices]

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?

[Anirudh Sasikumar · Accepted solution]

>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

[vivoices]

Thanks Anirudh,

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

David