Flex Paint – Flex Display Object to PNG

UPDATE - I’ve created a new version of Flex Paint which doesn’t require the server roundtrip.

Flex allows you to easily create beautiful UIs. But what if you want to take a piece of the UI and save it as an image? Well, using Tinic’s AS3 PNG Encoder, Remote Object, and Flash’s BitmapData and ByteArray API it’s very easy. To show how this is done, I created a simple application called Flex Paint.

Flex Paint (requires Flash 9)

How it Works

We use the Flash drawing API to draw on a canvas. Then when the “Save Image” button is clicked we do a few simple things. First we create a new BitmapData object:

var bd:BitmapData = new BitmapData(canvas.width,canvas.height);

Then we copy canvas’ pixels onto the BitmapData object:

bd.draw(canvas);

Now we convert the BitmapData object to a ByteArray encoded as a PNG:

var ba:ByteArray = PNGEnc.encode(bd);

And then upload the PNG via Remote Object:

ro.doUpload(ba);

Then Remote Object just saves the file to the file system. If you would like to download the code for Flex Paint, you can find it on Source Forge. Let me know what you think. Thanks!