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中就能找到,需要两个步骤
第一步:代码上将FileReference对象用Object引用,利用dynamic的Object可以随意调用函数也能编译通过的特性,不过要注意通过hasOwnProperty的判断处理一下
01 | public static function addExportButton(toolbar:Box, network:Network):Button{ |
02 | return addButton(toolbar, "Export Image" , DemoImages.export, function (): void { |
03 | var fr: Object = new FileReference(); |
04 | if (fr.hasOwnProperty( "save" )){ |
05 | var bitmapData:BitmapData = network.exportAsBitmapData(); |
06 | var encoder:PNGEncoder = new PNGEncoder(); |
07 | var data:ByteArray = encoder.encode(bitmapData); |
08 | fr.save(data, 'network.png' ); |
10 | Alert.show( "install Flash Player 10 to run this feature" , "Not Supported" ); |
第二步:编译环境参数需要设置上 -target-player=10.0.0