保存Flex界面组件为本地图片文件

TestApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">

<mx:Script>
<![CDATA[ 
	import com.charts.ImageUtil;
	import mx.collections.ArrayCollection;

	[Bindable]
	private var ac:ArrayCollection;

	private function doSaveScreen():void {	 	
		var imgUtil:ImageUtil = ImageUtil.getInstance();
		imgUtil.saveScreen(chartBox, "pipeChart-124.jpg");
	}

	private function initApp():void {
	    ac = new ArrayCollection([   
	        {name: "value1",num: 10},   
	        {name: "value2",num: 15},   
	        {name: "value3",num: 20}   
	    ]);  

	    pieChart.dataProvider = ac;
	}

	private function showLabel(data:Object, field:String, index:Number, percentValue:Number):String {
	    return int(data.num/35 * 100) + "%";
	}
  ]]>
</mx:Script>

<mx:VBox>
	<mx:Button id="SaveButton" label="Save Screen" click="doSaveScreen()"/>

	<mx:HBox>
		<mx:Box id="chartBox" backgroundColor="white" paddingLeft="5" paddingTop="5" paddingBottom="5" paddingRight="5">
			<mx:PieChart id="pieChart" dataProvider="{ac}" width="200" height="200">
			    <mx:series>
			        <mx:PieSeries displayName="Series 1" labelFunction="showLabel" labelPosition="inside" nameField="name" field="num"/>
			    </mx:series>
			</mx:PieChart>
			<mx:Legend dataProvider="{pieChart}"/>	
		</mx:Box>

		<mx:Box backgroundColor="green" paddingLeft="5" paddingTop="5" paddingBottom="5" paddingRight="5">
			<mx:Image id="targetImage" x="10" y="10"/>
		</mx:Box>  
	</mx:HBox>
</mx:VBox>

</mx:Application>

ImageUtil.as

package com.sinocai.flexui.core
{
	import com.sinocai.flexui.core.amf.AsyncDataRpc;
	import com.sinocai.flexui.core.amf.RpcManager;

	import flash.display.BitmapData;
	import flash.utils.ByteArray;

	import mx.core.UIComponent;
	import mx.graphics.ImageSnapshot;
	import mx.graphics.codec.JPEGEncoder;
	import mx.rpc.AsyncToken;
	import mx.rpc.events.ResultEvent;

	public class ImageUtil {				
		public static function getUIComponentBitmapData(target: UIComponent): BitmapData {
			//var m : Matrix = new Matrix();
			//var bd : BitmapData = new BitmapData(target.width, target.height);
			var bd:BitmapData = ImageSnapshot.captureBitmapData(target); //, null, null, null, null, true
			bd.draw(target);
			return bd;
		}

		private static function saveScreenHandler(event:ResultEvent, token:AsyncToken=null):void {
		 	//Alert.show("Screen is saved.");
		}

		//Convert the screen component as image(jpeg) byte array
		public static function getUIComponentByteArray(target: UIComponent):ByteArray {
		 	var bd: BitmapData = getUIComponentBitmapData(target);
		 	var jpgEnc:JPEGEncoder = new JPEGEncoder(100);		 	
			var imgByteArray:ByteArray = jpgEnc.encode(bd);
			return imgByteArray;
		}

		//Save the screen component as image(jpeg)
		public static function saveScreen(target: UIComponent, fileName:String):void {
			var imgByteArray:ByteArray = getUIComponentByteArray(target);

			//Save the image byte array to local image file in temporary folder
			var rpcManager:RpcManager = RpcManager.getInstance();
			var flexFileManager:AsyncDataRpc = rpcManager.buildAsyncService("flexFileManager", saveScreenHandler, null);
		 	flexFileManager.storeFile(imgByteArray, fileName);
		}
	}
}

[b]Note:[/b]
不能够读取 style 设置的属性。
var bd : BitmapData = new BitmapData(target.width, target.height);

可以读取 style 设置的属性。
var bd:BitmapData = ImageSnapshot.captureBitmapData(target);