昨天写了个FLEX导出EXCEL的例子,今天写一个FLEX导出图像的例子,其实原理一样,都是通过服务端进行。
注意把组件处理为图像的类库要下载下来,http://code.google.com/p/as3corelib/
flex把组件处理为图像字节流的类ExplortImage.as
表现层自己随便写什么什么东西进去都行test.mxml吧
下面就是服务端的代码了,非常简单,是把FLEX发过来的数据转为图像输出。
注意把组件处理为图像的类库要下载下来,http://code.google.com/p/as3corelib/
flex把组件处理为图像字节流的类ExplortImage.as
- package utils
- {
- import com.adobe.images.JPGEncoder;
- import flash.display.BitmapData;
- import flash.net.URLRequest;
- import flash.net.URLRequestMethod;
- import flash.net.navigateToURL;
- import flash.utils.ByteArray;
- import mx.core.UIComponent;
- public class ExportImage
- {
- public function ExportImage()
- {
- }
- /**
- * 把图像发送到服务端,转为图像输出
- */
- public function sendImageByte(target:UIComponent,url:String):void {
- var request:URLRequest = new URLRequest(url);
- request.contentType = 'applicatoin/octet-stream';
- request.data = getJPGByteArray(target);
- request.method = URLRequestMethod.POST;
- navigateToURL(request, "_blank");
- }
- /**
- * 把目标组件转换为图像数组
- */
- private function getJPGByteArray(target:UIComponent):ByteArray {
- var bitmapData : BitmapData = new BitmapData(target.width, target.height);
- bitmapData.draw(target);
- var jpg : JPGEncoder = new JPGEncoder(80);
- var jpgByteArray : ByteArray = jpg.encode(bitmapData);
- return jpgByteArray;
- }
- }
- }
- <?xml version="1.0" encoding="utf-8"?>
- <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="700" height="620" showCloseButton="true" close="PopUpManager.removePopUp(this)">
- <mx:Script>
- <![CDATA[
- import utils.ExportImage;
- private var exportImage:ExportImage=new ExportImage;
- ]]>
- </mx:Script>
- <mx:ViewStack x="0" y="0" id="vs_chart" width="100%" height="100%" creationPolicy="all">
- <mx:Canvas id="cv_column" label="柱型图" width="100%" height="100%">
- <mx:ColumnChart id="ch_column" showDataTips="true" top="91" right="10" bottom="153" left="200">
- </mx:ColumnChart>
- <mx:Legend dataProvider="{ch_column}" direction="horizontal" x="200" y="55"/>
- <mx:Label x="200" y="27" text="柱状图" id="lb_imgInfo"/>
- <mx:Label x="325" y="27" text="开始时间:2008-03-14" id="lb_startTime"/>
- <mx:Label x="531" y="27" text="结束时间:2008-12-24" id="lb_endTime"/>
- <mx:DataGrid id="db_info" left="10" top="438" bottom="0" right="10">
- </mx:DataGrid>
- <mx:Button x="482" y="55" label="导出图像" click="exportImage.sendImageByte(cv_column,'http://192.168.0.114/exportImage.php')"/>
- <mx:Panel title="数据来源" borderThicknessLeft="1" borderAlpha="1" borderThicknessRight="1" top="91" left="10" bottom="183" right="502" cornerRadius="4" layout="absolute" backgroundAlpha="1.0">
- <mx:Text id="txt_dataCome" top="10" left="10" right="10" bottom="10"/>
- </mx:Panel>
- </mx:Canvas>
- <mx:Canvas id="cv_pie" label="饼型图" width="100%" height="100%">
- <mx:PieChart id="ch_pie" showDataTips="true" left="10" top="48" right="10" bottom="138">
- <mx:series>
- <mx:PieSeries nameField="xaxis" field="value"/>
- </mx:series>
- </mx:PieChart>
- <mx:Legend id="le_pie" dataProvider="{ch_pie}" x="10" y="48"/>
- <mx:Panel layout="absolute" title="数据来源" top="462" left="10" right="10" bottom="10">
- <mx:Text x="10" y="10" id="txt_pieDataCome"/>
- </mx:Panel>
- <mx:Label x="24" y="19" text="饼状图" id="lb_pieImgInfo"/>
- <mx:Label x="208" y="19" text="开始时间:2008-03-14" id="lb_pieStartTime"/>
- <mx:Label x="364" y="19" text="结束时间:2008-12-24" id="lb_pieEndTime"/>
- <mx:Button x="534" y="17" label="导出图像" click="exportImage.sendImageByte(cv_pie,'http://192.168.0.114/exportImage.php')"/>
- </mx:Canvas>
- </mx:ViewStack>
- </mx:TitleWindow>
- <?
- if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
- {
- $jpg = $GLOBALS["HTTP_RAW_POST_DATA"];
- header('Content-Type: image/jpeg');
- header("Content-Disposition: attachment; filename=".time().".jpg");
- echo $jpg;
- }
- ?>