把flex组件导出图像

来源：互联网发布：淘宝联盟收入怎么提现编辑：程序博客网时间：2024/06/05 16:03

昨天写了个FLEX导出EXCEL的例子，今天写一个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;  
        } 
    }
}

表现层自己随便写什么什么东西进去都行test.mxml吧

<?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>

下面就是服务端的代码了，非常简单，是把FLEX发过来的数据转为图像输出。

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