在最近的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 >
< 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 ;
}
{
if ( $encodedPNGData != "" )
{
$binaryData = base64_decode ( $encodedPNGData );
$file = " assets/images/something.png " ;
file_put_contents ( $file , $binaryData );
return $file ;
}
return null ;
}