导出Flex组件为jpg图片

转载 2013年12月01日 21:02:39
前几天看了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保存图片到服务器。

 

相关文章推荐

Flex 屏幕截图并导出图片

在flex中也经常会用到截图功能,并且将截图的图片保存至本地。一想到图片那么我们就自然想到他的存在形式 bitmap byteArray.所以自然就会联系到bitmap类上去。下面让我们一起来看看都有...

Flex在线拍照并上传(兼容multipart/form-data)

关于Flex拍照的文章很多,Camera的用法基本上类似。   上传的一般做法是:得到ByteArray之后直接放在Request的体内容中传给服务器端,服务器打开请求流,直接读取byte[...

Flex读取本地图片文件为ByteArray并显示

Flex提供FileReference用于本地文件的选择与操作。同时,FileReference提供upload方法,直接提供multipart/form-data类型的封装上传,但每次只能上传一个文...

flex组件保存为图片

  • 2012年11月06日 10:29
  • 267B
  • 下载

Flex4 Spark组件ButtonBar设置图片

主程序ButtonBarTest源代码如下: 

flex中给图片(或任意组件)着色的方法

作者:屈剑峰   2011年4月3日     在flex中可使用ColorMatrixFilter滤镜给组件着色,该滤镜属性matrix是一个4*5的矩阵,Flex在显示组件时各像素新的颜色计算公式如...

beamer加载动画+gif导出多个png或者jpg图片

本文解决beamer中加载动画和gif动画问题 beamer是latex用于做类似ppt报告的package.之前一直认为beamer做出的文件无法做出动态图,一直舍弃没用。最近用powerpoin...

Matlab导出eps或jpg图片的四种方法

 MATLAB是美国MathWorks公司出品的商业数学软件,用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境。MATLAB和Mathematica、Maple并称为...
  • rookiew
  • rookiew
  • 2016年05月15日 20:07
  • 7544

flex 导出文件&导出图片&文件下载

1、flex 根据文件内容和文件名称导出为文件
  • huihyh
  • huihyh
  • 2013年12月03日 14:52
  • 1329
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:导出Flex组件为jpg图片
举报原因:
原因补充:

(最多只允许输入30个字)