用Flex程序开发截屏功能

在最近的Flex项目中需要做个屏幕截图功能，然后保存为图片文件，以前好像在哪里看到这样的例子，找了半天没找着，其实实现起来也挺简单的。

具体步骤如下：

• 创建一个BitmapData对象
• 拷贝目标组件的象素数据到BitmapData对象上
• 转换BitmapData对象为PNG编码的ByteArray (需要用到PNGEnc库)
• 转换ByteArray为Base64Encoded字符串，这样便于发送数据给后台处理
• 在后台程序中(如PHP等)，对数据解码然后写入文件

PNG Encoder 库是由Tinic Uro编写的。

这里是Flex代码：

<? xml version="1.0" encoding="utf-8" ?>
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute" >
< mx:Script >
<![CDATA[
import mx.utils.Base64Encoder;
import mx.rpc.events.ResultEvent;
import mx.utils.ObjectUtil;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.core.UIComponent;

public function onResult(event:ResultEvent) :void
{
Alert.show(ObjectUtil.toString(event.result));
}

public function onFault(event:FaultEvent) :void
{
Alert.show("Got error: "+event.message);
}

public function takeSnapshot(target:UIComponent) :void
{
var bd:BitmapData = new BitmapData(target.width,target.height);
bd.draw(target);
var ba:ByteArray = PNGEnc.encode(bd);
var be:Base64Encoder = new Base64Encoder();
be.encodeBytes(ba);
var encodedData:String = be.flush();
ro.saveImage(encodedData);
}
]]>

</ mx:Script >

< mx:Button  click ="takeSnapshot(targetPanel)"  label ="Save Image"  x ="10"  y ="100" />

< mx:Panel  id ="targetPanel" >
< mx:Canvas  backgroundColor ="#EEEEEE" >
< mx:Label  text ="Hello World"   />
</ mx:Canvas >
</ mx:Panel >

< mx:RemoteObject  id ="ro"  destination ="serviceEndpoint"  result ="onResult(event)"  fault ="onFault(event)" />
</ mx:Application >

后台的PHP代码：

public   function  saveImage( $encodedPNGData )
{
if  ( $encodedPNGData   !=   "" )
{
$binaryData   =   base64_decode ( $encodedPNGData );
$file   =   " assets/images/something.png " ;
file_put_contents ( $file ,   $binaryData );
return   $file ;
}
return   null ;
}