flex保存图片

flex保存图片  

<?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:Script>
<![CDATA[
   import mx.graphics.codec.JPEGEncoder;
   import mx.core.UIComponent;
   import mx.controls.Alert;
   private var bmpImage:Bitmap = null;
   private var file:FileReference = new FileReference();
   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);
    var jpg:JPEGEncoder = new JPEGEncoder();
    var byt:ByteArray = jpg.encode(bmpData);
    Alert.show(byt.toString());
    file.save(byt,'1111.jpg');
   }
   private function onShow():void
   {
    //创建一个UIComponent对象
    var uic:UIComponent = new UIComponent();
    //将Bitmap对象加入到UIComponent对象中
    if(bmpImage == null){
     Alert.show("你截图了吗？");
    }else{
     uic.addChild(bmpImage);
     //将UIComponent对象加入Canvas中
     showImage.addChild(uic);
    }
   }
]]>
</mx:Script>
<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:Application>

说明：第一、用BitmapData和Bitmap将区域装换为图像

然后用JPEGEncoder将图像转换为byte。用FileReference保存到本地。

注意：其中FileReference的save方法只能在flash player 10以上的版本才能编译，需要在flex builder中修改。右键点击项目，在项目属性中找 flex compile, 修改 html wrapper,把 9.0.0 改为10.0.0
但由于我们并不需要 html wrapper 选项，所以待 eclipse 编译过一次之后又可以取消此选项而没有影响了。

转自： http://addiwang.blog.163.com/blog/static/11813077201122111438982/

 

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
      creationComplete="application1_creationCompleteHandler(event)" width="655" height="512">
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
  
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   import flash.net.FileReference;
   
   import mx.events.FlexEvent;
   import mx.graphics.ImageSnapshot;
   import mx.graphics.codec.JPEGEncoder;
   
   private var bitmaps:IBitmapDrawable;
   private var jietuWidth:Number;
   private var jietuHeight:Number;
   private var file:FileReference;
   private var bit:BitmapData;
   
   /**
    *点击截图方法 
    */
   protected function button1_clickHandler(event:MouseEvent):void
   {
    //显示另存为按钮
    saveas.visible = true;
    //获取选取得组件快照
    bit = ImageSnapshot.captureBitmapData(bitmaps) as BitmapData;
    //设置对应快照得宽高
    jietu.width = jietuWidth;
    jietu.height = jietuHeight;
    //显示获取得快照
    jietu.source = new Bitmap(bit);
   }
   
   /**
    *点击另存为方法 
    */
   protected function saveas_clickHandler(event:MouseEvent):void
   {
    //隐藏另存为按钮
    saveas.visible = false;
    //获取组件得快照
    var imgData:ImageSnapshot = ImageSnapshot.captureImage(bitmaps,0);
    //调用文件保存方法 保存生成得图片到硬盘
    file.save(imgData.data,"image.png");
   }
   
   /**
    *更换截图目标 
    */
   private function onClick(event:Event):void
   {
    switch(event.target)
    {
     case beijietu1:
      //更换获取快照得组件 为 beijietu1 组件
      bitmaps = beijietu1;
      //根据beijietu1组件的坐标宽高绘制外框线
      drawKuang(beijietu1.x,beijietu1.y,beijietu1.width,beijietu1.height);
      //设置显示快照的组件得宽高
      jietuWidth = beijietu1.width;
      jietuHeight = beijietu1.height;
      break;
     case beijietu2:
      //更换获取快照得组件 为 beijietu2 组件
      bitmaps = beijietu2;
      //根据beijietu2组件的坐标宽高绘制外框线
      drawKuang(beijietu2.x,beijietu2.y,beijietu2.width,beijietu2.height);
      //设置显示快照的组件得宽高
      jietuWidth = beijietu2.width;
      jietuHeight = beijietu2.height;
      break;
    }
   }

   /**
    *框住要截图得图片 
    */
   private function drawKuang(kx:Number,ky:Number,kw:Number,kh:Number):void
   {
    //清除当前绘画内容
    s.graphics.clear();
    //设置绘画线条样式
    s.graphics.lineStyle(1,0x00ff00,2);
    //绘画圆角矩形
    s.graphics.drawRoundRect(kx,ky,kw,kh,5,5);
    //结束绘画填充
    s.graphics.endFill();
   }
   
   
   protected function application1_creationCompleteHandler(event:FlexEvent):void
   {
    //默认获取beijietu1组件得快照
    bitmaps = beijietu1;
    //创建上传下载文件对象
    file = new FileReference();
   }

  ]]>
 </fx:Script>
 <mx:Image source="@Embed('1.jpg')" id="beijietu1" x="21" y="26" click="onClick(event)" buttonMode="true"/>
 <mx:Image source="@Embed('2.jpg')" id="beijietu2" x="183" y="22" click="onClick(event)" buttonMode="true"/>
 <mx:Image id="jietu" x="21" y="237" width="151" height="104" />
 <s:Button x="51" y="189" label="截图" click="button1_clickHandler(event)" buttonMode="true"/>
 <s:Button x="133" y="188" label="另存为" id="saveas" click="saveas_clickHandler(event)" visible="false"/>
 <s:SpriteVisualElement id="s"/>
</s:Application>