导出Flex组件为jpg图片

http://wangcheng.iteye.com/blog/129007

前几天看了lwz7512的 《 基于servlet导出Flex/Flash界面为图形文件的简单方法》，今天有时间就实践了一下。

1.使用BitmapData将flex的某个UIComponent转换为ByteArray
2.使用JPGEncoder转换ByteArray。JPGEncoder是corelib( http://code.google.com/p/as3corelib/) 的组件。我直接导入corelib.swc却报错，幸好有源代码可以直接使用。
3.使用URLRequest发送ByteArray到服务端的java servlet
4.在servlet中使用ImageIO保存图片或者输出到response

下面是具体代码

actionscript 代码

 

1. <mx:Application   
2.     xmlns:mx="http://www.adobe.com/2006/mxml"   
3.     layout="absolute">  
4.   
5.     <mx:Script>  
6.         [CDATA[  
7.             import mx.controls.Alert;  
8.             import mx.core.UIComponent;  
9.             import mx.collections.ArrayCollection;  
10.             import com.adobe.images.JPGEncoder;  
11.               
12.             [Bindable]  
13.             public var expenses:ArrayCollection = new ArrayCollection(  
14.                 [  
15.                     {Month:"Jan", Profit:2000, Expenses:1500},  
16.                     {Month:"Feb", Profit:1000, Expenses:200},  
17.                     {Month:"Mar", Profit:1500, Expenses:500}  
18.                 ]  
19.             );  
20.               
21.             public function getJPGByteArray(target:UIComponent):ByteArray {  
22.                 var bitmapData : BitmapData = new BitmapData(target.width, target.height);  
23.                 bitmapData.draw(target);   
24.                   
25.                 var jpg : JPGEncoder = new JPGEncoder();  
26.                 var jpgByteArray : ByteArray = jpg.encode(bitmapData);  
27.                 return jpgByteArray;  
28.             }  
29.               
30.             public function sendImageByte(target:UIComponent):void {  
31.                 var request:URLRequest = new URLRequest("myImage");  
32.                 request.contentType = 'applicatoin/octet-stream';  
33.                 request.data = getJPGByteArray(target);  
34.                 request.method = URLRequestMethod.POST;  
35.                 navigateToURL(request, "_blank");  
36.             }  
37.         ]]  
38.     </mx:Script>  
39.   
40.     <mx:Panel id="chartPanel" title="Bar Chart" width="300" height="400">  
41.      <mx:BarChart id="myChart" dataProvider="{expenses}" width="100%" height="100%">  
42.         <mx:verticalAxis>  
43.            <mx:CategoryAxis   
44.                 dataProvider="{expenses}"   
45.                 categoryField="Month"  
46.            />  
47.         </mx:verticalAxis>  
48.         <mx:series>  
49.            <mx:BarSeries   
50.                 yField="Month"   
51.                 xField="Profit"   
52.                 displayName="Profit"  
53.            />  
54.            <mx:BarSeries   
55.                 yField="Month"   
56.                 xField="Expenses"   
57.                 displayName="Expenses"  
58.            />  
59.         </mx:series>  
60.      </mx:BarChart>  
61.      <mx:Legend dataProvider="{myChart}"/>  
62.      <mx:Button label="Get Chart Image" click="sendImageByte(myChart)"/>  
63.      <mx:Button label="Get Panel Image" click="sendImageByte(chartPanel)"/>  
64.     </mx:Panel>  
65.       
66. </mx:Application>  

这里使用了一个Bar Chart图表进行实验，URLRequest的myImage是我的java servlet

java 代码

 

1. import java.awt.image.BufferedImage;  
2. import javax.imageio.ImageIO;  
3. import org.apache.commons.io.IOUtils;  
4.   
5. public class ImageServlet extends HttpServlet {  
6.       
7.     @Override  
8.     protected void doGet(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException {  
9.         doService(arg0, arg1);  
10.     }  
11.   
12.     @Override  
13.     protected void doPost(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException {  
14.         doService(arg0, arg1);  
15.     }  
16.   
17.     private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {  
18.         //saveImage(request, response);  
19.         printImage(request, response);  
20.     }  
21.       
22.     private void saveImage(HttpServletRequest request, HttpServletResponse response) throws IOException  {  
23.         String fileName = "D://" + System.currentTimeMillis() + ".jpg";  
24.         BufferedImage bufferedImage = ImageIO.read(request.getInputStream());  
25.         if (bufferedImage != null) {  
26.             ImageIO.write(bufferedImage, "jpeg", new File(fileName));  
27.         }  
28.     }  
29.       
30.     private void printImage(HttpServletRequest request, HttpServletResponse response) throws IOException  {  
31.         response.setContentType("image/jpeg");  
32.         response.setHeader("Content-Length:", String.valueOf(request.getInputStream().available()));  
33.           
34.         ServletOutputStream sos = response.getOutputStream();  
35.         IOUtils.copy(request.getInputStream(), sos);  
36.         sos.flush();  
37.         sos.close();  
38.     }  
39. }  

printImage将图形输出到response，将会在web浏览器中看到图片。或者你可以使用saveImage保存图片到服务器。