File manipulation client side with the Flash player with Flex 4 and Coldfusion

by Paul Kukiel 1:44 AM 30 comments

Ever wanted to load an image into your web application instantly? Well now you can. Well you have been able to for a little while actually, it was introduced with Flash player 10 and Mick Chambers has a good article on getting started with reading and writing files from withing the Flash player.

What you need for the demo: Flash 10 and Windows.
What I needed: Coldfusion ( I'll assume the same can be done in .NET/PHP ect ), the updates to Flexbuilder 3.3 SDK or Flex 4 ( I'm using Flex 4 Gumbo Max pre beta edition ) and that's it.

I don't know what the issue is but I just can't get the file.load() methods to work on OSX or my Ubuntu partition. If you know why or how to fix this please let me know.

This code should be reasonably easy to follow but here is a quick break down.

Using the new Flash file reference methods load a file into the Flash player as a byteArray ( binary ). At this stage my demo is only JPG but the AS3 core library also has a PNG library. I set the image data to the byteArray so we can preview the size of the image and how it will look once its been converted.
Clicking the resize button converts the byteArray to bitMapData and based on the value of the HSlider, work out a scaling factor and send this to the Matrix.

Then create a new bitMapData and draw the old data with the new Matrix transform. There are many additional things that can be applied to the data check out the references for the rest.

Finally convert the bitMapData back to JPG format and re-assign that to the data property of the image.

Once it's converted you can save it back to your local file system without the server ever seeing the data or knowing what file you loaded. It has no performance impact on the server and uses no bandwidth or traffic.

As the result is binary as a byteArray we can also send this back to Coldfusion and save it directly as a .jpg The nice thing is that the image sent back to the server is the new size and simply needs to be written to disk as we all know that server side image resizing/manipulation can be resource heavy.

Application?
OK it's a nice feature but what can I use it for? Say you have a real-estate web site and you have many agents needing to upload images. Now they can do all the resizing/manipulation locally which in general is going to be reducing ( but could be enlarging ) the size of the images within the application removing the need for either a thick client side app ( Photoshop/Fireworks/Paint etc ) or the server side manipulation saving traffic, server load and upload time.

Source view: Source View

Full screen app: Full Screen Resize



Sources used:
Mike Chambers Blog
AS3 core library
Andres Alderson
Adobe Flex RFeferences
House of Fusion Flex mailing list

I like having a working demo that you can try for yourself saving back to my server is enabled and you can browse to the saved images. I clean this up every few hours with a scheduled task.

I don't yet have a need for this in our current applications...yet but I think it can be very usefull. Sure the code needs some work and I'd like to work out why it's not working in OSX/*nix but I think its a good proof of concept/starting point.

Be aware that trying to resize a large/high quality image will impact browser performance for the duration of the conversion. Also there is no error checking if you try load a non jpg into the browser its not going to work. And while the controls are a little rough they still give a good indication of what can be accomplished.