|
YOUR FEEDBACK
Did you read today's front page stories & breaking news?
SYS-CON.TV SYS-CON.TV WEBCASTS |
MXDJ TOP LINKS YOU MUST CLICK ON ! Bitmap Data Binary Data, ColdFusion & Adobe Flex
Sending BitmapData to a server and saving it as a JPG file
By: Andrew Trice
May. 12, 2007 06:00 PM
Several months ago I posted some articles on my blog about Flex 2 components and accessing/modifying their BitmapData. In one example, I sent the BitmapData to the server and saved it as a JPG file, and I've been asked numerous times since... "How did you do that?" It's surprisingly easy to do once you understand the concepts involved. There are four ways to get binary data from the Flex application back to your server: AMF3 (RemoteObject), Web Services, HTTP Services, or through a Socket connection. In this article I'll cover the first three topics as they pertain to Flex 2; Socket connectivity could take an article all by itself.
Regardless of how you're sending the data to the server, it's a good practice to compress the data client side whenever possible. I've used the JPGEncoder class at http://code.google.com/p/as3corelib with great success. You can use this class to convert binary image data into a compressed JPG ByteArray that can be sent to the server. This is a good practice for two reasons:
private function getUIComponentBitmapData( target : UIComponent ) : BitmapData Once you have the BitmapData, you'll have to create an instance of the JPGEncoder class and encode the BitmapData. (This example uses the JPG quality of 75.) It's also important to remember that your Flex application will have a slight pause while the encoding is being processed:
var bd : BitmapData = getUIComponentBitmapData( paintCanvas ); Once you have the data converted to a JPG ByteArray, you're ready to push it to the server and save it. The fastest and easiest way to do that is to use a RemoteObject method and serialize the data using AMF3. This example shows you a method in a ColdFusion Component (CFC) that will let you send the data and save it to the local file system:
<cfcomponent name="ImageSave" displayname="ImageSave" output="false"> You can see that the code is actually very simple. The CFC's ROsave (remote object save) method is expecting binary data as a parameter. When executed, the data is written to the file system using the <CFFILE /> "write" method. On the Flex side, we'll have to instantiate a mx:RemoteObject:
<mx:RemoteObject To save the data, we'll invoke the ROsave method and pass the JPG-encoded ByteArray as a parameter:
var bd : BitmapData = getUIComponentBitmapData( paintCanvas ); If you aren't using remoting, you can save the data using Web Services or HTTP services. Most seasoned ColdFusion developers might stop me here and say... "If you're using CFCs as Web Services, why wouldn't you just use them as RemoteObject methods since they are faster?" My response is this: This is just an example. You may be able to take this method and apply it to other technologies where it may be applicable (.NET, Java, PHP, etc.).
<cfcomponent name="ImageSave" displayname="ImageSave" output="false"> YOUR FEEDBACK
LATEST FLEX STORIES & POSTS
SUBSCRIBE TO THE WORLD'S MOST POWERFUL NEWSLETTERS SUBSCRIBE TO OUR RSS FEEDS & GET YOUR SYS-CON NEWS LIVE!
|
SYS-CON FEATURED WHITEPAPERS MOST READ THIS WEEK |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||