flex 画面快照截图与显示

一、对指定画面进行快照、截图。
在Flex SDK中flash.display包下面有两个类Bitmap和BitmapData。在flex中可以通过两个类对图片进行操作。BitmapData类中有一个draw方法这个方法的第一个参数是进行画面截图的源对象，这个对象必须实现IBitmapDrawable接口。而DisplayObject类实现了这个接口，DisplayObject是所有可见控件的先祖类，也就意味着所有在flex可以看到的画面、控件都可以用draw方法来进行快照截图。
具体的代码如下：
复制代码 代码如下:
private var bmpImage:Bitmap = null;
private function onClick():void
{
//创建一个大小和截图对象一致的图片
var bmpData:BitmapData = new BitmapData(source.width,source.height);
//进行快照截图，其中第二个参数Matrix是对图片进行变换用的，例如旋转缩放等。
//如果图片不需要变换可以用new Matrix()或者null都可以。
bmpData.draw(source,new Matrix());
//创建Bitmap对象
bmpImage = new Bitmap(bmpData);
}

BitmapData对象不能直接显示到画面上，所以需要把BitmapData对象封装到Bitmap中，按下截图按钮后，Panel的快照就生成了，保存到了Bitmap对象中。
效果图片：

二、将捕获到的截屏图片显示到画面上。
接下来就是把Bitmap对象显示到画面上，这里需要借助UIComponent类。由于直接把Bitmap对象加到Canvas等容器中，运行时会出错，因为容器中添加的子对象必须是UIComponent的子类，而Bitmap不是，所以需要UIComponent类来封装一层。然后把UIComponent对象加入到Canvas容器中，这样图片就显示出来了。
代码如下所示：
复制代码 代码如下:
private function onShow():void
{
//创建一个UIComponent对象
var uic:UIComponent = new UIComponent();
//将Bitmap对象加入到UIComponent对象中
uic.addChild(bmpImage);
//将UIComponent对象加入Canvas中
showImage.addChild(uic);
}

先按下截图按钮进行截图操作，然后按下显示按钮把截图显示到Canvas中。效果如图所示。

三、以下是这个程序的完整代码：
复制代码 代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
fontFamily="宋体" fontSize="12" width="831" height="448">
<mx:Panel id="source" x="26" y="77" width="320" height="263" layout="absolute">
<mx:TextInput x="91" y="51"/>
<mx:TextInput x="91" y="106"/>
<mx:Button x="73.5" y="158" label="取 消"/>
<mx:Button x="172.5" y="158" label="确 定"/>
<mx:Label x="32" y="53" text="用户名："/>
<mx:Label x="32" y="108" text="密 码："/>
<mx:Label x="109" y="10" text="用户登录" fontWeight="bold"/>
</mx:Panel>
<mx:Canvas id="showImage" x="427" y="58" width="347" height="292">
</mx:Canvas>
<mx:Label x="124" y="32" text="截图区域"/>
<mx:Label x="562" y="32" text="截图显示区域"/>
<mx:Button x="147" y="394" label="截图" click="onClick()"/>
<mx:Button x="548" y="394" label="显示" click="onShow()"/>
<mx:Script>
<!--[CDATA[
import mx.core.UIComponent;
private var bmpImage:Bitmap = null;
private function onClick():void
{
//创建一个大小和截图对象一致的图片
var bmpData:BitmapData = new BitmapData(source.width,source.height);
//进行快照截图，其中第二个参数Matrix是对图片进行变换用的，例如旋转缩放等。
//如果图片不需要变换可以用new Matrix()或者null都可以。
bmpData.draw(source,new Matrix());
//创建Bitmap对象
bmpImage = new Bitmap(bmpData);
}
private function onShow():void
{
//创建一个UIComponent对象
var uic:UIComponent = new UIComponent();
//将Bitmap对象加入到UIComponent对象中
uic.addChild(bmpImage);
//将UIComponent对象加入Canvas中
showImage.addChild(uic);
}
]]-->
</mx:Script>
</mx:Application>

四、总结。
虽然可以用Bitmap和BitmapData类进行截图和现实，但是flex不能直接读写文件。图片的保存还需要后台程序的配合来完成。
详细出处参考：http://www.jb51.net/article/20616.htm

摘要：

使用BitmapData类来创建一个包含了从组件中获取的图片数据的对象，使用mx.graphics.codec包提供的方法编码为JPEG或PNG格式，然后使用AIR API提供的File和FileStream类保存到本地。

具体方法：

首先我们我们需要得到屏幕的截图，要做到这一点，我们要使用BitmapData类。比如我们想从一个命名为myChart的线状图表上获取截图：

import flash.display.BitmapData;
var bmpd:BitmapData = new BitmapData(myChart.width,myChart.height);
bmpd.draw(myChart);

然后我们需要把bitmapdata对象编译为ByteArray对象，这样我们就可以保存为文件了。这个ByteArray对象需要被格式化，我们可以使用mx.graphics.codec包中的JPEGEncoder和PNGEncoder类来实现它。

编码为JPEG格式：

import mx.graphics.codec.JPEGEncoder;
//create a new instance of the encoder, and set the jpeg compression level from 0 to 100
var jpgenc:JPEGEncoder = new JPEGEncoder(80);
//encode the bitmapdata object and keep the encoded ByteArray
var imgByteArray:ByteArray = jpgenc.encode(bmpd);

编码为PNG格式：

import mx.graphics.codec.JPEGEncoder;
//create a new instance of the encoder
var pngenc:PNGEncoder = new PNGEncoder();
//encode the bitmapdata object and keep the encoded ByteArray
var imgByteArray:ByteArray = pngenc.encode(bmpd);

现在我们已经准备好了ByteArray数据，我们只需要把它保存到本地就可以了。我们可以用File和File Stream类来实现。

建立一个JPEG文件参照:

//gets a reference to a new empty jpg image file in user desktop
var fl:File = File.desktopDirectory.resolvePath(”snapshot.jpg”);

建立一个PNG文件参照：

//gets a reference to a new empty jpg image file in user desktop
var fl:File = File.desktopDirectory.resolvePath(”snapshot.png”);

现在我们可以把ByteArray用File Stream保存到文件中。

//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);
}
flex 截图给java 保存到服务器上 

2009-04-21 09:09:57|  分类： flex 的学习 |  标签：flex  截图给java  保存到服务器上   |字号 订阅
flex 端
     _flashPlay : 组件的 ID
     _img : 图片组件的 ID
     _UploadFileBackupRmot : RemoteObject 的对象

    private function fnSaveImage():void
    {
    
         var bitmapData:BitmapData = ImageSnapshot.captureBitmapData(_flashPlay);
      
         var jpg:JPEGEncoder = new JPEGEncoder();
      
         var m_jpgByteArray : ByteArray = jpg.encode(bitmapData);
                
         _img.source = m_jpgByteArray; //显示捕捉的图像

         _UploadFileBackupRmot.saveImage( m_jpgByteArray );
    }

java 端
     public String saveImage( byte[] buffer )
    {
        try {
           URL path = UploadFileBackupDao.class.getResource("/"); //取当前系统路径    
           String imgPath = path.toString();
           imgPath =  imgPath.substring(6,imgPath.length());
           imgPath = imgPath.replace("%20", " ");
  
           OutputStream img_os = new FileOutputStream(imgPath+"../../aa.jpg");
  
           img_os.write(buffer);//将文件写入服务器
  
           img_os.close();
  
         } catch (Exception e) {e.printStackTrace(); return "保存失败"; }
  
      return "保存成功";
     }