Upload BitmapData Snapshot to Server in AS3

May 30, 2008

Upload BitmapData Snapshot to Server in AS3

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

18 Comments

Grant

Out of all the tutorials and source files out there on how to do this yours was the only one for me that worked straight away. So thanks very much! Can I use this source code freely in my own projects?

Jul 5th, 2008
Stephen Braitsch

Absolutely. All code included is open source and available under a BSD license. Enjoy.

Jul 5th, 2008
Marvin

This has been the most educational AS experience for me ever. Thanks for this! I seem to have everything working properly, but is there a way to get rid of the border around the .png files?

Jul 17th, 2008
Jayden Lawson

This is great. Is there anything similar for AS2?

Aug 11th, 2008
Fausto Carrera

For AS2 there’s the Quasimodo class:
http://www.quasimondo.com/archives/000645.php#000645

I’ts there a way to calculate the percent of PNG/JPG exportation?

Sep 4th, 2008
Kris

Awesome, thanks a lot!

Nov 18th, 2008
Richard Olsson

This works great and I got a chance to use it in production right away. I’m a bit disappointed by the way it’s laid out, API-wise, though, which makes it, while easy to use, also very narrow. But at least it’s an awesome POC!

I might refine the interface and get back to you. (Although for this project I will probably just hack to change file format encoding et c.) Thanks a lot for sharing the code for this method!

Jan 30th, 2009
Bezz

Hi
I have a question. I was looking for a way to send some variables to the PHP file at the same time. I mean like a HTML form which uploads the file and sends the value of fields at the same time.

Is there a way to do that?
thanks

Feb 2nd, 2009
Stephen Braitsch

@Richard. Indeed code can always be improved upon. If you rewrite this and post a more feature rich version, please share the link.

@Bezz, while this is possible I would encourage you to make a separate call to the server with your form data as you will most likely want to receive some message back from the server after that form data has been processed. By adding it to the data property of the request that contains the encoded image data you may run into decoding problems on the server.

Feb 4th, 2009
Bezz

Hi everyone
I’ve made a flash project which is almost complete. The only thing I need to do is to upload a snapshot of a display object. It seems that this script works but I don’t know how to use it.
I will really appreciate if someone tells me how to do it. I mean how to configure my project to import this class file.

When the project gets to this line:
_dbmp = new DynamicBitmap(_target, _filename);

It generates an error:
1080: Call to a possibly undifined method DinamicBitmap

Here is my E-mail in case someone can help me
behzad1122@hotmail.com

Thanks

Feb 5th, 2009
David

I second Bezz’s last comment: What version of Flex has a DynamicBitmap class? I don’t see it here, in Flex 3 documentation:
http://livedocs.adobe.com/flex/3/langref/all-index-D.html

…
Oh, nevermind, I see it in the source example: it’s a custom class that extends Sprite.
k thanks!

Mar 3rd, 2009
Jason

Hey thanks for this

Just a note that on this page my computer was lagging up. Firefox used 485MB of RAM with no other tabs open. Restarted my comp, same thing. Tried IE6 (God forbid!), again no other pages open, and it jumped up to 1.1GB of RAM. Kind of scary.

This has happenned on WindowsXP and Linux (Ubuntu 8.04), using Firefox 3, IE6, Opera and Chrome.

As for what might be causing it, IE6 reported an error in this javascript file:
http://include.reinvigorate.net/re_.js

But Chrome has a task manager that keeps track of how much each plugin is using - and a flash plugin was using 480MB

Anyway, just thought I’d note. I’ve visited this page before and had no issues but I thought it worth reporting. Again, thanks for the help with Actionscript

Mar 3rd, 2009
Stephen Braitsch

Thanks Jason for the note.

I recently installed a lightbox plugin that was doing some funky things on the page and removing that seemed to improve page performance. I appreciate the heads up and will take a closer look. Cheers

Mar 16th, 2009
harry

I can’t download the source code, there was a problem, can anyone help me ?

Apr 15th, 2009
Simon

Hey,

been working with this script and ran into a problem, perhaps you could give me some advise… The script is working fine when I run it from my PC (on Flash CS3), but when I upload it to the server, nothing happens, no request is going to PHP script… :/ I thought it might be some kind of security error in the URLRequest but couldn’t find anything…

Thanks,
Simon

Apr 19th, 2009
Philipp

Hi Stephen,

“Absolutely. All code included is open source and available under a BSD license. Enjoy.”

Unfortunately I don’t believe that’s the case. Jonathan Marston licensed the class on which you’re building under a CC non-commercial attribution sharealike license.
To my understanding, this means any derivative work (i.e. software that uses this - and by extension your - code) needs to be licensed under CC itself and may not be of commercial nature.

So it doesn’t look like we can use this freely in our own projects. Which is a pity because it would be just what I need right now.

May 18th, 2009
Philipp

I’d like to add to my previous comment that I’ve since contacted Jonathan and he kindly gave us permission to use his class under an MIT license.
But yes, if you’d like to use this in your commercial projects and want to be on the safe side, you’ll need to contact him.

May 18th, 2009
Stephen Braitsch

Thanks Philipp for your comments. For the record any code that I write and make available on this site is completely free to use in your personal or commercial projects.

May 26th, 2009