用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;
}