DougHughes.net

One of the reasons people love Flex and other recent Adobe technologies is because Adobe works hard to make complicated things as easy as possible. Using technologies like ColdFusion and Flex together can make a very complicated process into a fairly simple one. In the case of needing to capture images based on Flex UIComponents, using a couple simple calls to other Flex classes makes it possible to capture UIComponent screen shots directly into JPEG or PNG data.Flex also makes it easy to redistribute code in the form of SWC files… like a Java JAR file or a Windows DLL, so attached to this post is the alagad.swc file that we’ll be using to distrbute the nifty AS3 widgets we come up with over the course of time. Currently all it contains is the UIComponentImageEncoder, but look for more later on! In order to make this work, you need to use the following classes from the Flex3 SDK:

• UIComponent
• BitmapData
• Matrix
• PngEncoder
• JpegEncoder

NOTE: If you are still using the Flex 2 SDK, you simply need to get the AS3CoreLib from it’s Google Code project. If doing so, note that the JpegEncoder may intead be called JpgEncoder.

In order to make this as easy and consistent as possible, Alagad rolled the functionality up into an AS3 class called com.alagad.graphics.UIComponentImageEncoder:

package com.alagad.graphics
{
	import flash.display.BitmapData;
	import flash.geom.Matrix;
	import flash.utils.ByteArray;

	import mx.core.UIComponent;
	import mx.graphics.codec.IImageEncoder;
	import mx.graphics.codec.JPEGEncoder;
	import mx.graphics.codec.PNGEncoder;

	public class UIComponentImageEncoder
	{
		public var imgType:String = new String();
		public static const ENCODE_JPEG:String = "JPEG";
		public static const ENCODE_PNG:String = "PNG";

		public function UIComponentImageEncoder(imgType:String) {
			if (imgType != ENCODE_JPEG || imgType != ENCODE_PNG)
			throw "Invalid encoding specified; must be JPEG or PNG";

			this.imgType = imgType;
		}

		public function encode(src:UIComponent):ByteArray {
			var bmpData:BitmapData = new BitmapData(src.height,src.width);
			var imageEncoder:IImageEncoder;
			bmpData.draw(src,new Matrix());

			if (this.imgType == ENCODE_JPEG) {
				imageEncoder = new JPEGEncoder(100);
			} else if (this.imgType == ENCODE_PNG) {
				imageEncoder = new PNGEncoder();
			}
			return imageEncoder.encode(bmpData);
		}
	}
}

Thus with a simple example, such as:

var imageEncoder:UIComponentImageEncoder = new UIComponentImageEncoder("JPEG");
var imgData:* = imageEncoder.encode(MyUIComponent);

It becomes extremely easy to convert a UIComponent instance to JPG or PNG data which can then be sent thru the Flash Remoting Gateway to ColdFusion (among other server-side technologies) to be saved to disk and downloaded, or in the case of AIR simply saved to local disk or sent to the server for sharing.

This is yet another example of Adobe technologies making complicated jobs very easy.