保存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);
		}
	}
}

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

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

评论

2 楼 louisling 2009-09-01  

AsyncDataRpc 和 RpcManager 不是重点，这是用来在 Flex 里面调用Java的方法的2个封装了 BlazeDS 的2个类。

你可以用 RemoteObject 来调用也是一样的效果。
关键的是 ImageSnapshot.captureBitmapData(UIComponent); 可以保存组件为BitmapData ，再转换为 ByteArray.

1 楼 jauney 2009-08-21  

老大
import com.sinocai.flexui.core.amf.AsyncDataRpc;  
import com.sinocai.flexui.core.amf.RpcManager; 
这两个引用时哪的啊，提示找不到！