Flex导出图片,需要经历几个步骤:
1、创建出UI组件,将要导出的内容绘制其上
2、创建出BitmapData对象,通过bitmapData.draw将组件绘制其中
3、通过PNGEncoder或JPEGEncoder转码将BitmapData的内容转换成ByteArray的二进制数据
通过以上步骤你在内存中已经拥有了图片数据,如果你使用的是TWaver的Network组件那你是幸运的,通过network的exportAsBitmapData(logicalRect:Rectangle = null, zoom:Number = 1):BitmapData函数你可以轻松将拓扑图上任何区域的任何缩放比例的图片内容转换成BitmapData对象。
不过这里重点要说的是“最后一公里”的事情,内存中的图片信息看不见也摸不着,一般都需要将其导出到本地文件,以前传统的做法是将ByteArray的二进制数据通过HTTP传输到后台,然后再redirect成下发文件让用户保存的方式,这种方式的弊端是显而易见的,明明在client的数据非得绕一圈到server然后在跑回client端,在提倡绿色节能的时代,这种解决方案似乎是在犯罪,这里不得不感谢Adobe终于在FlashPlayer10增加了个绿色节能的函数FileReference.save(),这样就可以直接将client内存端的数据存到本地硬盘。
细心的同学已经发现FileReference.save()函数只在Flex4上才出现,目前还有很多项目是基于Flex3的SDK下开发,包括TWaver Flex Demo也是基于Flex3的环境,如何让技术Flex3的产品也能有这个功能呢,答案在TWaver的Flex Demo中就能找到,需要两个步骤
第一步:
第二步:编译环境参数需要设置上 -target-player=10.0.0
[img]http://dl.iteye.com/upload/attachment/491442/e5a13555-8ca4-34ad-8ebb-04827ff03495.png[/img]
1、创建出UI组件,将要导出的内容绘制其上
2、创建出BitmapData对象,通过bitmapData.draw将组件绘制其中
3、通过PNGEncoder或JPEGEncoder转码将BitmapData的内容转换成ByteArray的二进制数据
通过以上步骤你在内存中已经拥有了图片数据,如果你使用的是TWaver的Network组件那你是幸运的,通过network的exportAsBitmapData(logicalRect:Rectangle = null, zoom:Number = 1):BitmapData函数你可以轻松将拓扑图上任何区域的任何缩放比例的图片内容转换成BitmapData对象。
不过这里重点要说的是“最后一公里”的事情,内存中的图片信息看不见也摸不着,一般都需要将其导出到本地文件,以前传统的做法是将ByteArray的二进制数据通过HTTP传输到后台,然后再redirect成下发文件让用户保存的方式,这种方式的弊端是显而易见的,明明在client的数据非得绕一圈到server然后在跑回client端,在提倡绿色节能的时代,这种解决方案似乎是在犯罪,这里不得不感谢Adobe终于在FlashPlayer10增加了个绿色节能的函数FileReference.save(),这样就可以直接将client内存端的数据存到本地硬盘。
细心的同学已经发现FileReference.save()函数只在Flex4上才出现,目前还有很多项目是基于Flex3的SDK下开发,包括TWaver Flex Demo也是基于Flex3的环境,如何让技术Flex3的产品也能有这个功能呢,答案在TWaver的Flex Demo中就能找到,需要两个步骤
第一步:
package
{
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.DisplayObjectContainer;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.net.FileReference;
import flash.utils.ByteArray;
import mx.controls.Alert;
import mx.graphics.codec.PNGEncoder;
public class ChartExport
{
static public var Instance:ChartExport=new ChartExport();
public function ChartExport()
{
}
public function exportChart(d:DisplayObject):void{
var dt:DisplayObject = d;
var bmpData:BitmapData = new BitmapData(d.width,d.height,true,0x00ffffff);
bmpData.draw(d);
var fr:Object = new FileReference();
if(fr.hasOwnProperty("save"))
{
var encoder:PNGEncoder = new PNGEncoder();
var data:ByteArray = encoder.encode(bmpData);
fr.save(data,'chart.png');
}
else
{
Alert.show("当前flash player版本不支持此功能,请安装10.0.0以上版本!","提示");
}
}
}
}
第二步:编译环境参数需要设置上 -target-player=10.0.0
[img]http://dl.iteye.com/upload/attachment/491442/e5a13555-8ca4-34ad-8ebb-04827ff03495.png[/img]
本文介绍在Flex中导出UI组件为图片的方法,包括创建BitmapData、使用PNGEncoder转码及利用FileReference.save()直接保存至本地的过程。
1753

被折叠的 条评论
为什么被折叠?



