ActionScript
Flash AS3: Saving Image To Disk
February 12, 2011
6

This is an example application that allows you to save images from Flash into user’s hard drive. It requires Flash player 10 to work. This example is written in Flash CS4 but should work in CS5. The same technique can also be adapted to use in Flex 3.3 and newer. You need to target Flash player 10 otherwise you’ll get Publish/compile error (because the FileReference.save function is only available on Flash Player 10 or newer).

 

Overview

In order to save image to user hard-drive, you need to to convert the Flash DisplayObject (Bitmap, MovieClip, Sprite, Shape) that you want to save into an image format. You can use the JPGEncoder or PNGEncoder library that comes in as3corelib. You can find the latest version here:
http://github.com/mikechambers/as3corelib/tree/master/src/com/adobe/images/

 

Secondly, you need to be able to prompt user to save the file. Fortunately, the FileReference class enabled us to do this. The saving process must be initiated by user, a Flash application cannot save into user’s hard drive in a Flash application without prompting the user to save (you can bypass the dialog in an AIR application though).

Example

The example presented later contains a simple drawing functionality that allows user to draw into a Sprite. There is a button that allows user to save the drawing, and there is a slider that allows user to adjust image quality (of the exported image).

Converting DisplayObject into ByteArray

Using the JPGEncoder, we can convert DisplayObject into ByteArray, suitable for saving into file. If using the JPGEncoder, it’ll look like this:

import com.adobe.images.JPGEncoder;
var jpgEncoder:JPGEncoder = new JPGEncoder(quality);
var byteArray:ByteArray = jpgEncoder.encode(bitmapData);

With the PNGEncoder, it’ll look like this:

import com.adobe.images.PNGEncoder;

byteArray = PNGEncoder.encode(bitmapData);

The JPG format is lossy so you can degrade the image quality to get smaller image size, while the PNG format is lossless, so there is no quality option. I won’t discuss the drawing code here because the focus is on converting the DisplayObject into image data.

Saving Into User’s Hard Drive

Using the FileReference.save() function, we can prompt the user to save the file with the following call.

	var fileReference:FileReference=new FileReference();
	fileReference.save(byteArray, ".jpg");

For more information, you can read the Adobe doc.

Saving The Byte Array Into Image

With the two combined, here’s the function that gets called when the Save Picture button is clicked:

function onSavePictureButtonClicked(event:MouseEvent):void
{
	var bitmapData:BitmapData=new BitmapData(mc_canvas.width, mc_canvas.height);
	bitmapData.draw(mc_canvas);
	//
	var jpgEncoder:JPGEncoder = new JPGEncoder(quality_slider.value);
	var byteArray:ByteArray = jpgEncoder.encode(bitmapData);

	byteArray = PNGEncoder.encode(bitmapData);

	var fileReference:FileReference=new FileReference();
	fileReference.save(byteArray, ".jpg");
}

 

I am using the JPGEncoder for this example (if you want to save as PNG, just replace ). I.e.:

import com.adobe.images.PNGEncoder;
...
byteArray = PNGEncoder.encode(bitmapData);

Note: Remember to target Flash Player 10 or newer otherwise you might get this error (because the FileReference.save function is only available on Flash Player 10 or newer):

1061: Call to a possibly undefined method save through a reference with static type flash.net:FileReference.

Example code download link: http://www.permadi.com/blog/2011/02/flash-as3-saving-image-to-disk-example-and-source-download/