Upload BitmapData Snapshot to Server in AS3

Note : This class has been updated, you can view the new post here.

Here is a very simple wrapper class I wrote last night that allows you to take a BitmapData snapshot of a Display Object on the Stage, convert it to a .png or .jpg and upload it to your server in a directory you can specify at runtime. All in about 10 lines of code.

The technique is quite simple. You instantiate a new ‘DynamicBitmap’ and pass in the target DisplayObject you want to snapshot as well as a string of the filename you want to call it. e.g. ‘MyBitmapSnapshot.png’

In the following example I created two buttons on the stage which snapshot and upload the bitmap separately however you can combine this all into one action if you like.

private var _dbmp:DynamicBitmap;
private var _uploadScript:String = 'uploads/upload.php';
private var _uploadDirectory:String = 'images/'; // optional //
private var _target; // some display object on the stage //
private var _filename:String = 'myBitmapSnapshot.png';
 
public function ApplicationMain ()
{
     snapshot_btn.addEventListener(MouseEvent.CLICK, takeSnapshot);
     upload_btn.addEventListener(MouseEvent.CLICK, uploadSnapshot);
}
 
private function takeSnapshot(evt:MouseEvent):void
{
     _dbmp = new DynamicBitmap(_target, _filename);
}
 
private function uploadSnapshot(evt:MouseEvent):void
{
     _dbmp.upload(_uploadscript, _directory);
}

Underneath the _target DisplayObject is drawn into a BitmapData object and then based on the file extension you give it in the filename it is converted into either a JPEG or PNG byteArray using the AS3CoreLib encoding classes by Tinic Uro.

These encoding classes return a raw byteArray which by itself cannot be uploaded to the server as the MIME protocol requires precisely defined headers to accompany the raw image data and instruct the server what to do with it.

Enter the URLRequestWrapper class which is a slightly modified version of the UploadPostHelper class written by Jonathan Marston which adds in the necessary headers required by the server:

--pfhchaivbrmxhcighexxsspxpxhepeea
 
Content-Disposition: form-data; name="Filename"
 
myBitmapSnapshot.png
 
--pfhchaivbrmxhcighexxsspxpxhepeea
 
Content-Disposition: form-data; name="dir"
 
images/
 
--pfhchaivbrmxhcighexxsspxpxhepeea
 
Content-Disposition: form-data; name="Filedata"; filename="myBitmapSnapshot.png"
 
Content-Type: application/octet-stream
 
‰PNG

The URLRequestWrapper is simply a modified URLRequest with a data property that contains the image data and all the necessary headers required by the server, including the optional destination directory you specified for the image. When this URLRequest is loaded into a URLLoader object it arrives at the server via the global $_POST array.

I’ve included a simple upload script ‘uploads.php’ that looks for a ‘dir’ property in the header information which contains the _uploadDirectory variable you specified in Flash. It is entirely optional, if no directory is specified it will install the image in the default directory as specified in the upload.php script. This may prove handy in an application where the you’d like to be able to change the destination directory of the newly created image at runtime.

Note: If you specify a directory that does not exist on the server it will be created via the new recursive flag introduced in php5. Be sure to have php5 installed and enabled on your server or the script will throw an argument error and possibly not run.

Source Example Files Here

  • venu

    HI
    this article i am using working well
    But image is creating with out the name,

    I want to upload image with the name plz help me.

  • aneeshtan

    Hey, Thanks for the great tutorial . Is it possible to implement this feature on Action script 2.0 ?! I tried but failed .