In this example i want to show you how to download remote image(jpg or png) and save it to the desktop.

Load remote file. We use Loader Class and listen for complete event. We call load method and pass URLRequest parameter.

private function loadRemoteImage(url:String):void
{
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
    loader.load(new URLRequest(url));
}

Create a BitmapData object. We can access BitmapData object through Bitmap object. In our example Bitmap object is the same as loaderInfo.content.

FOR DEMO PURPOSES ONLY: Image (<mx:Image id=”img”/>) component shows downloaded image.

private function completeHandler(event:Event):void
{
    var loaderInfo:LoaderInfo = event.target as LoaderInfo;
    img.source = loaderInfo.content;
    var bitmap:Bitmap = loaderInfo.content as Bitmap;
    _bitmapData = bitmap.bitmapData;
}

Encode image to JPEG or PNG. Before saving image, we have to take the current BitmapData object and encode to the ByteArray object. This ByteArray object needs to be encoded in the proper format and for this we can use the JPEGEncoder and PNGEncoder. 

private function saveImage():void
{
    var imgByteArray:ByteArray;
    var extension:String;
    if(textInput.text.toLowerCase().indexOf('.jpg') != -1)
    {
        // encode to JPEG
        var jpegEncoder:JPEGEncoder = new JPEGEncoder(80);
        imgByteArray = jpegEncoder.encode(_bitmapData);
        extension = '.jpg';
    }
    else if(textInput.text.toLowerCase().indexOf('.png') != -1)
    {
        // encode to PNG
        var pngEncoder:PNGEncoder = new PNGEncoder();
        imgByteArray = pngEncoder.encode(_bitmapData);
        extension = '.png';
    }
    else
        return;

    ...

Save file to the desktop. Now that we already have the encoded ByteArray, we just need to save it to a local file. We do this using the File and FileStream classes.

     ...
     var file:File = File.desktopDirectory.resolvePath('test'+extension);
     var fileStream:FileStream = new FileStream();
     fileStream.open(file, FileMode.WRITE);
     fileStream.writeBytes(imgByteArray);
     fileStream.close();
}

View Full Source Code

Get free Flex Builder 3 Professional for education

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" xmlns:components="components.*" viewSourceURL="srcview/index.html"> 

    <mx:Script>
        <![CDATA[
            private var fileRef:FileReference;

            private function selectFile():void
            {
                fileRef = new FileReference();
                var fileFilter:FileFilter = new FileFilter('Image', '*.jpg');
                fileRef.addEventListener(Event.SELECT, selectHandler);
                fileRef.addEventListener(Event.COMPLETE, completeHandler);
                fileRef.browse([fileFilter]);
            } 

            private function selectHandler(event:Event):void
            {
                fileRef.removeEventListener(Event.SELECT, selectHandler);
                fileRef.load();
            } 

            private function completeHandler(event:Event):void
            {
                fileRef.removeEventListener(Event.COMPLETE, completeHandler);
                img.load(fileRef.data);
            }
        ]]>
    </mx:Script> 

    <mx:Canvas
        x="0" y="40" width="710" height="295"
        borderStyle="solid" borderColor="#303030"
        backgroundColor="#404040"> 

        <mx:Image id="img"/> 

    </mx:Canvas> 

    <components:GradientBox
        y="1"
        gradientFrom="#F9F9F9"
        gradientTo="#DFDFDF"
        borderColor="#303030"
        width="710" height="40"
        verticalAlign="middle" paddingLeft="10"> 

        <mx:Button
            label="Select File"
            click="selectFile()"/> 

    </components:GradientBox> 

</mx:Application>