Upload a screen capture to a server

 

In this article I'm going to explain one way to upload a screen capture to a server using ActionScript 3.0 in Flash Builder, Flex. We will upload the image to the server using a POST call.

package se.flashutvecklaren.graphics
{
   import flash.display.BitmapData;
   import flash.display.IBitmapDrawable;
   import flash.net.URLLoader;
   import flash.net.URLRequest;
   import flash.net.URLRequestMethod;
   import flash.net.URLVariables;
   import flash.utils.ByteArray;

   import mx.graphics.ImageSnapshot;
   import mx.graphics.codec.IImageEncoder;
   import mx.graphics.codec.PNGEncoder;
   import mx.utils.Base64Encoder;

   public class ScreenShotUploader
   {

      private var _saveImageLoader:URLLoader;

      public function ScreenShotUploader()
      {
      }

      public function uploadImage(rSource:IBitmapDrawable):void
      {
         var tBitmapData:BitmapData = ImageSnapshot.captureBitmapData(rSource);

         var tEnc:IImageEncoder = new PNGEncoder();
         var tBA:ByteArray = tEnc.encode(tBitmapData);
         var tB64:Base64Encoder = new Base64Encoder();
         tB64.encodeBytes(tBA);

         var tPath:String = 'my/Path/to/image/receiver';
         var tRequest:URLRequest = new URLRequest(tPath);
         var tVar:URLVariables = new URLVariables();
         tVar.base64 = tB64.toString();
         tRequest.data = tVar;
         tRequest.method = URLRequestMethod.POST;	

         _saveImageLoader = new URLLoader();
         _saveImageLoader.load(tRequest); 
      }
   }
}

I present the code needed above and is now going to explain it step by step. Our method takes an object that implements IbitmapDrawable as it's argument. This is the object that we want to capture an image of and then upload to the server. The image captured can be of the complete application or just for one of it's objects on the stage.

To capture an image I first call the static function captureBitmapData belonging to the class ImageSnapshot. The captured image will be returned as a BitmapData object. I choose to compress and encode the data to a PNG format using the class PNGEncoder. There is a corresponding class named JPEGEncoder if you prefer to encode the data as a JPG image. There is a performances advantage to using PNGEncoder rather than using the JPEGEncoder in ActionScript 3.0 in Flash.

After that I encode my binary image data with Base64Encoder to simplify the sending of the image as a POST call to the server. Base64 encodes the binary data as an ASCII byte sequence.

Next we create the call to the server and executes it. I create an URLRequest, tRequest, and passes the address to the server script as a parameter. The server script will receive the image and store it on the server. Then I create the variables that will be sent to the server during the request. In this case I only have one variable that I name to base64. I set this variable to the data encoded with the base64Encoder. Finally I execute the call by creating a URLLoader and then calling the load method on it with the URLRequest as a parameter.

Add the code bellow at any place in your application to upload a screen capture of it. You can also change the parameter, this, to any object that you would like to upload a captured image of.

var tSCU:ScreenShotUploader = new ScreenShotUploader();
tSCU.uploadImage(this);

This is all that is needed to capture and upload an image to a server from your application using Flash Builder 4.5 and Flex framework. Of course you also need a server script that captures the images and stores it on the server. But that isn't done in ActionScript so I leave that for the back end programmers to solve.

Learn more about ActionScript, Flash Builder 4.5 and the Flex framework in our other tutorials. I hope you found this AS3 guide to be helpful.