导出Flex组件为jpg图片

前几天看了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保存图片到服务器。

评论

1 楼 deserteaglec 2012-07-02  

太坑爹了，下载的不是源文件