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!

This entry was posted in Flex, Java, Open Source, RIA. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • Gene

    I am working on a project that has a similar feature but with one difference. I have a “paint” like feature but it also has the ability to import images and then they can draw and add text similar to your example above, but then the entire contents of the “paint palette” are saved as a new image. The issue is that the images that I am dealing with are very large ( like over 200 megs ) and the only thing that seems to make sense is to convert the image to a smaller size while in the paint pallette. We use a similar technique to save the image, but the issue is that when the new saved image is blown up it looks pixelated ( I am guessing this is because the imported 200 meg file lost some resolution when being converted to a smaller size, but this is the only way to make it look good in the pallette ). Any suggestions AT ALL would be so greatly appreciated. The end “saved” image needs to be able to be blown up LARGE ( like the size of a billboard large). PLEASE PLEASE PLEASE HELP!!!!!

  • http://www.jamesward.com James Ward

    @Gene I haven’t tried this with large images. Without some code to play with it’s hard to say what the best approach is.

  • http://www.jamesward.com James Ward

    I’ve created a new version of Flex Paint with Flex 4.

  • santhosh

    Hi

    Do you have a idea how to make the drawing board with scrollable.

  • http://www.jamesward.com James Ward

    @santhosh You can just wrap it inside a scrollable container. Check out the new version where this would be much easier.

  • Vladimir

    Hi James,

    Your Blog is really full of inspiration and ideas. I’m doing some investigation regarding saving flash drawing in remote file. Could you post complete code for original implementation of Flex Paint.
    Thx.

  • http://www.mixedwaves.com Codetoon

    Thanks for the sample app. I had problems with the Tinic’s AS3 PNG Encoder. I used your version and it works excellent.

  • Shailendra

    Thanks man, you rock…… great app!!!



  • View James Ward's profile on LinkedIn