Best way to save images streamed from web to device?

[xTLS]

We have an app for browsing a catalog that streams content from a web server. There is an image for each product, some in JPG format and some in PNG format. Our server is fast and reliable so everything has been running smoothly so far, but we'd like to give users the option of saving the data to their device so they don't have to stream every time. I've only worked with SharedObjects before, which are capped at 100kb and won't be useful in this situation.

What would be the best approach for storing the images, and keeping them from being overwritten during updates? Saving an uncompressed Bitmap will use too much storage space. Adobe's JPEGEncoder class is completely useless as it takes 10-30 seconds to save a moderately-sized image on a typical device. It also doesn't make sense to re-encode the JPGs, and we need to preserve the transparency in the PNGs.

Right now we're using a Loader to retrieve the images and using loader.content to access the image data in code. Is it possible to save the image file in its original format locally when it is downloaded with a Loader? We would want the images stored in the application data and not accessible through the gallery. As for saving the data for each product (e.g. price, description, etc), would the built-in SQLite support be sufficient or should we create our own files?

Thanks for any tips!

[xTLS]

Surely someone has some idea of how to approach this.

[cmholden1]

We typically use a native extension to do this, but it is certainly possible in ActionScript.

When the file has been downloaded, we save it to the applicationStorageDirectory.

Next time, we check to see if exists locally, if so - use that and don't download.

   var file:String = renameFile(_externalHttpImage);

   //see if we already have a copy of the image
   var loader:Loader = new Loader();
   var ba:ByteArray = new ByteArray();
   if( fileExists(file)){
    file = File.applicationStorageDirectory.resolvePath(file).nativePath;
   
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, local_loader_complete);
    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorOnChargeFile);
    var f:File = File.applicationStorageDirectory.resolvePath(file);

    if( f.exists){
     var fs:FileStream;
     try {
     
      //now load the size of the file
      fs = new FileStream();
      fs.open(f, FileMode.READ);
      fs.readBytes(ba);
      //  trace("READ " + fs.readUTF());
      fs.close();
     }
     catch(e:Error){
      trace( "Error Loading Image File  '" +file + ": " +  e.message+ "\n"+ e.getStackTrace());
     }
    }
    loader.loadBytes(ba);
   }

[xTLS]

Sounds like a good start. Thanks cmholden! What method do you use to save the image loaded from the web?

Say we use a Loader called graphicLoader to load an image. on Event.COMPLETE, we can access the image as a DisplayObject using graphicLoader.content(). Are we able to simultaneously save the image in its original format? e.g.

var bytes:ByteArray = new ByteArray();

bytes.writeObject(graphicLoader.content());

fileStream.writeBytes ( bytes, 0, bytes.length );

or do we have to load and save the image file in a different manner and then convert it to a DisplayObject?

I am struggling to find anything online that addresses this.

[xTLS · Accepted solution]

Ah, I got it. Checking for existing local files is done as cmholden indicated. If the image isn't stored locally, we use URLStream to load the image file from the web. We can then save the file directly via the ByteArray from the URLStream, and then use our existing Loader code to load the same ByteArray as a DisplayObject. I was concerned there would be some app slowdown from saving the files but the change in performance is negligible, and of course once the images are saved on the device they load much faster the next time the app is run!