flex从指定显示组建导出图片

http://blog.chinaunix.net/uid-8532476-id-2029119.html

导出Flex组件为jpg图片



基于servlet导出Flex/Flash界面为图形文件的简单方法

关键字: flex, chart, java



使用flash能做出很好的界面或者图表(chart)，但是如何将这些内容保存成图片呢，这个问题是个值得考虑的难题。本文将简单的描述一下解决思路并给出代码。



1。第一步：获取要导出的flash图形数据
通过AS3的bitmapdata类将界面上某个要截取的diplayobject转换为ByteArray，通过ExternalInterface传递给html页面中的表单。

2。第二步：将转换的位图数据传递到后台
这个是最难的部分，如果采用flex的数据服务则代价昂贵，如果采用amfphp/openphp又比较麻烦，那怎么办呢？
解决方法：将bytearray编码为base64的字符串进行http传递。

3。第三步：将客户端传来的数据转换为图形文件
既然前端传来的是base64字符串，那就需要基于java的base64解码方法，然后转换为byte[]，这样就可以生成图形文件了。

下面给出需要的资源：

a)bitmapdata转换为图形ByteArray的类：

http://www.kaourantin.net/2005/10/png-encoder-in-as3.html
http://www.kaourantin.net/2005/10/more-fun-with-image-formats-in-as3.html

b)bytearray转换为base64编码的类：

http://www.dynamicflash.com/goodies/base64

c)解码base64字符串为byte[]的类：

http://www.source-code.biz/snippets/java/2.htm





关键字: flex flash jpg image chart bitmapdata jpgencoder java 转换 图

前几天看了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 代码

<mx:Application   
   xmlns:mx="http://www.adobe.com/2006/mxml"   
   layout="absolute">  
 
   <mx:Script>  
       [CDATA[  
           import mx.controls.Alert;  
           import mx.core.UIComponent;  
           import mx.collections.ArrayCollection;  
            import com.adobe.images.JPGEncoder;  
              
            [Bindable]  
            public var expenses:ArrayCollection = new ArrayCollection(  
                [  
                    {Month:"Jan", Profit:2000, Expenses:1500},  
                    {Month:"Feb", Profit:1000, Expenses:200},  
                    {Month:"Mar", Profit:1500, Expenses:500}  
                ]  
            );  
              
            public function getJPGByteArray(target:UIComponent):ByteArray {  
                var bitmapData : BitmapData = new BitmapData(target.width, target.height);  
                bitmapData.draw(target);   
                  
                var jpg : JPGEncoder = new JPGEncoder();  
                var jpgByteArray : ByteArray = jpg.encode(bitmapData);  
                return jpgByteArray;  
            }  
              
            public function sendImageByte(target:UIComponent):void {  
                var request:URLRequest = new URLRequest("myImage");  
                request.contentType = 'applicatoin/octet-stream';  
                request.data = getJPGByteArray(target);  
                request.method = URLRequestMethod.POST;  
                navigateToURL(request, "_blank");  
            }  
        ]]  
    </mx:Script>  
  
    <mx:Panel id="chartPanel" title="Bar Chart" width="300" height="400">  
     <mx:BarChart id="myChart" dataProvider="{expenses}" width="100%" height="100%">  
        <mx:verticalAxis>  
           <mx:CategoryAxis   
                dataProvider="{expenses}"   
                categoryField="Month"  
           />  
        </mx:verticalAxis>  
        <mx:series>  
           <mx:BarSeries   
                yField="Month"   
                xField="Profit"   
                displayName="Profit"  
           />  
           <mx:BarSeries   
                yField="Month"   
                xField="Expenses"   
                displayName="Expenses"  
           />  
        </mx:series>  
     </mx:BarChart>  
     <mx:Legend dataProvider="{myChart}"/>  
     <mx:Button label="Get Chart Image" click="sendImageByte(myChart)"/>  
     <mx:Button label="Get Panel Image" click="sendImageByte(chartPanel)"/>  
    </mx:Panel>  
      
</mx:Application>   

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


java 代码

 
import java.awt.image.BufferedImage;  
import javax.imageio.ImageIO;  
import org.apache.commons.io.IOUtils;  
 
public class ImageServlet extends HttpServlet {  
     
    @Override  
    protected void doGet(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException {  
        doService(arg0, arg1);  
    }  
  
    @Override  
    protected void doPost(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException {  
        doService(arg0, arg1);  
    }  
  
    private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {  
        //saveImage(request, response);  
        printImage(request, response);  
    }  
      
    private void saveImage(HttpServletRequest request, HttpServletResponse response) throws IOException  {  
        String fileName = "D://" + System.currentTimeMillis() + ".jpg";  
        BufferedImage bufferedImage = ImageIO.read(request.getInputStream());  
        if (bufferedImage != null) {  
            ImageIO.write(bufferedImage, "jpeg", new File(fileName));  
        }  
    }  
      
    private void printImage(HttpServletRequest request, HttpServletResponse response) throws IOException  {  
        response.setContentType("image/jpeg");  
        response.setHeader("Content-Length:", String.valueOf(request.getInputStream().available()));  
          
        ServletOutputStream sos = response.getOutputStream();  
        IOUtils.copy(request.getInputStream(), sos);  
        sos.flush();  
        sos.close();  
    }  
}   

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

下面的代码可以直接通过flex保存到本地

//var jpgenc:JPEGEncoder = new JPEGEncoder(80);
//imgByteArray = jpgenc.encode(bmpd);

var pngenc:PNGEncoder = new PNGEncoder();
imgByteArray = pngenc.encode(bmpd);

//gets a reference to a new empty image file 
var fl:File = getNewImageFile(ext);

//Use a FileStream to save the bytearray as bytes to the new file
var fs:FileStream = new FileStream();
try{
	//open file in write mode
	fs.open(fl,FileMode.WRITE);
	//write bytes from the byte array
	fs.writeBytes(imgByteArray);
	//close the file
	fs.close();
}catch(e:Error){
	trace(e.message);
}