Search Flex Samples

Doing 'screenshots' in Flex and sending them to ColdFusion

Flex will create a JPG of the panel and send it off to CF.

Here is a look at some of the code, you can also view the source from the Flex application.

First, I import the JPGEncoder class. I store a lot of AS libraries and components in one location and add them to the 'source path' of my application.

import com.adobe.images.JPGEncoder;

Next, I create a method that converts a UI component into BitmapData.

private function getBitmapData(target:UIComponent ) : BitmapData
var bitmapData:BitmapData = new BitmapData(target.width, target.height);
var matrix:Matrix = new Matrix();
bitmapData.draw(target, matrix);
return bitmapData;

As you can see, this method can take any UI element as an argument. This method returns the bitmap data of the UI element that was passed in.

Next, I create a method that handles calling the above method, and then sends the result to ColdFusion:

private function sendImage(target:UIComponent):void{
var bitmapData:BitmapData = getBitmapData(target);
var jpgEncoder:JPGEncoder = new JPGEncoder(90);
var imgData:ByteArray = jpgEncoder.encode(bitmapData);

This method also takes any UI element and uses it when calling getBitmapData(). It also creates an instance of the JPGEncoder class. The '90' that is passed into the constructor of JPGEncoder is the 'quality' of the resulting JPG.

Next we need to create a to talk to ColdFusion.

The CFC itself is very simple, it contains 1 method whose only argument is the binary data that is our image.

You will see that inside the method all we do is a to write the data to a file.

Lastly, we need some code that will fire off this entire event inside our Flex application.


Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples