导出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保存图片到服务器。

导出Flex组件为jpg图片

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义