Save Image to users file system with ActionScript 3.0

 

This article will create a useful class for saving images from a Flash application to the users local filesystem. The class will be able to save a screenshot of any display object on the stage. It can also be used to save a screen capture of the entire application to the users desktop. We will use Flash Builder 4.5 in the examples but you can use this class with any Flash authoring environment as long as you have access to the Flex SDK with the mx library which is includes the encoders. We use the save() method of the class FileReference which requires Flash Player 10 or later.

/**
 * @author: Andreas
 * @copyright: Flashutvecklaren.se All rights reserved.
 */
package se.flashutvecklaren.bitmap
{
   import flash.display.BitmapData;
   import flash.display.DisplayObject;
   import flash.net.FileReference;
   import flash.utils.ByteArray;
   
   import mx.graphics.codec.IImageEncoder;
   import mx.graphics.codec.JPEGEncoder;
   import mx.graphics.codec.PNGEncoder;
   /**
    *  Class for saving an image of a DisplayObject to the users file system.
    *  The image can be saved using PNG or JPG compression.
    */
   public class BitmapSaver
   {
      /**
       *  Constructor.
       */
      public function BitmapSaver()
      {
      }
      /**
       *  Saves an images of a DisplayObject as a PNG file on the users filesystem.
       *  @param rSource the DisplayObject to save an image of
       *  @see #saveJPG() 
       */
      public function savePNG(rSource:DisplayObject):void
      {
         save(rSource, new PNGEncoder(), '.png');
      }
      /**
       *  Saves an images of a DisplayObject as a JPG file on the users filesystem.
       *  @param rSource the DisplayObject to save an image of
       *  @param rQuality a value between 0.0 and 100.0. The smaller the quality value, the smaller the file size of the resultant image. The default value is 50.0.
       *  @see #savePNG()
       */
      public function saveJPG(rSource:DisplayObject, rQuality:Number = 50.0):void
      {
         save(rSource, new JPEGEncoder(rQuality), '.jpg');
      }
      /**
       *  @private
       *  Used for capturing and saving the image
       */
      protected function save(rSource:DisplayObject, rEncoder:IImageEncoder, rDefaultFileName:String):void
      {
         var tBD:BitmapData = new BitmapData(rSource.width, rSource.height);
         tBD.draw(rSource);
         var tBA:ByteArray = rEncoder.encode(tBD);
         var tFR:FileReference = new FileReference();
         tFR.save(tBA, rDefaultFileName);
         tBD.dispose();
         tBA.clear();
      }
   }
}

The class has two different save methods. One for saving the image as an PNG file, savePNG(), and one for saving it as a JPG image, saveJPG(). I recommend that you save the image as a PNG file if you have the opportunity to choose since the PNG encoder is a lot faster in Flash than the JPG encoder is. The two methods takes an argument called rSource. This is the display object that you want to save an image for to the users computer. You can use any display object as this parameter including the application itself. The saveJPG method also takes one optional argument, rQuality, which defines the the quality of the JPG compression.

All you need to do to save an image is to create an instance of the BitmapSaver and then call the save method of your choice, as shown bellow, with the DisplayObject as a parameter.

var tBS:BitmapSaver = new BitmapSaver();
tBS.savePNG(displayObjectToBeSaved);

One thing to remember is that Flash only allows you to saving files to the users desktop as part of a user event like clicking on a button or pressing a key. It is not possible to save an image without the user initiating the save. The save methods will open a dialog box that lets the user save the image to the local filesystem. The dialog box will ask the user to enter a filename and select a location on the local computer to save the file. The text field for the file name will be pre populated with the right file extension.

We now create a small application to test the class. The application draws a red rectangle and also place a button on the stage. The button is needed to trigger the save. The application will save the image to the local file system as a PNG file. If you like you can easily change the code to save the image as an JPG instead.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               width="200" height="130">
	
   <s:layout>
      <s:VerticalLayout />
   </s:layout>

   <fx:Script>
      <![CDATA[
         import se.flashutvecklaren.bitmap.BitmapSaver;
         protected function saveImg():void
         {
            var tBS:BitmapSaver = new BitmapSaver();
            tBS.savePNG(this);
         }
      ]]>
   </fx:Script>
	
   <s:Rect width="100" height="100">
      <s:fill>
         <s:SolidColor color="0xff0000" />
      </s:fill>
   </s:Rect>
	
   <s:Button click="saveImg()" label="Save" />
	
</s:Application>

You can test the application bellow. Click on the save button to save an image of the Flex application.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

That concludes this tutorial about how to save an image to the users file system with AS3 in Flash. Learn more about Flash Builder 4.5 and the Flex framework in our other tutorials on this site. I hope you found this guide to be helpful.