Feb
12
2011

 

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:

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

With the PNGEncoder, it’ll look like this:

[c]
import com.adobe.images.PNGEncoder;

byteArray = PNGEncoder.encode(bitmapData);
[/c]

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.

[c]
	var fileReference:FileReference=new FileReference();
	fileReference.save(byteArray, ".jpg"); 	
[/c]

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:

[c]
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"); 				
}
[/c]

 

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

[c]
import com.adobe.images.PNGEncoder;
...
byteArray = PNGEncoder.encode(bitmapData);
[/c]

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):

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

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

5 Responses to “Flash AS3: Saving Image To Disk”

  1. Hello,
    Thanks for this Tutorial. I chose the jpg Encoder. Currently, when the file is saved, it does not add the “.jpg” suffix unless it’s manually typed. The code looks like it should, but it doesn’t. Is there a fix for this? Thx

    Kenny

  2. You can specify a default filename when calling

    fileReference.save(byteArray, “.jpg”);

    You should include the file extension such as below:

    fileReference.save(byteArray, “image.jpg”);

    One issue with this is that if user has Hide Extension For Known File Types set, they will only see “image” instead of “image.jpg” and they will need to enter the .jpg extension manually.

    One workaround is to name your default filename to something like “image.jpg.jpg” so that users with that configuration knows that they should add .jpg extension.

  3. great example but how can we save image dynamically without showing dialogue box for saving image to specific location on disc.

    please reply at earliest as possible I am waiting…

  4. You can’t. That would raise security issue as any Flash movie can then write to user’s disk without user’s permission.

  5. Thank you so much for this easy and simple actionScript tutorial !!

    I’ve spent 2 hours looking for a simple way to convert bitmapdata to jpg and this article is the best i have found.

    The only thing i’m gonna change : i will save the jpg not on user’s hard drive but on server.

Leave a Reply

*