FLEX在线照相源码

前段时间一个系统在用户注册的时候必须让用户将相片一同上传 考虑到用户必须要到相片的电子版元件比较麻烦 所以做了个在线照相的功能 不敢独享成果 这里给大家分享源码出来 希望各位在用到的时候样式改动一下

简单叙述一下：代码里面有两种提交照片的方式 一种是webservice直接提交提片的二进制数据，另外一种是将图片转为base64编码的字符串 赋值到前台js表单之中 和表单信息一块同步提交（服务器需要将图片的字符串反编译为字节数组 然后进行保存） 现在默认是第二种代码

各位用js表单提交时记着将method设置为post 因为传输的数据量还是比较大的
以下是实现代码

 <?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="223" height="320" creationComplete="initApp()" backgroundColor="#ffffff">
     <mx:Style>
         Alert{font-size:12px;}
         .pa {
		   borderColor: #EFEFEF;
		   borderAlpha: 0.01;
		   cornerRadius: 13;
		   headerHeight: 15;
		   headerHeight: 1;
		}

     </mx:Style>

     <mx:Script>
         <![CDATA[
          /**
          * author:heng
          * email：vipheng@live.cn
          * FlexSDK:3.0
          * FlashPlayer:8以上 8具体可不可以没有验证过
          * 其他类库：as3crypto用于将字节数组转换为base64字符串
          * */
            import flash.external.*;
         	import flash.trace.Trace;
         	import com.hurlant.util.Base64;
         	import mx.utils.Base64Encoder;
         	import mx.graphics.codec.JPEGEncoder;
         	import mx.graphics.ImageSnapshot;
            import mx.events.CloseEvent;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;

             private static const DEFAULT_CAMERA_WIDTH:Number = 203; //摄像头显示宽度
             private static const DEFAULT_CAMERA_HEIGHT:Number = 257; //摄像头显示高度
             private static const DEFAULT_WEBSERVICE_URL:String = "http://116.30.163.247:8080/myphoto/services/SaveImage?wsdl"; //WebService地址 编译时将地址换位自己的ip

             private var m_camera:Camera; //定义一个摄像头
             private var m_localVideo:Video; //定义一个本地视频
             private var m_pictureBitmapData:BitmapData //定义视频截图
             private var _imageHotAreaData:BitmapData;//热图地区
             private var _mouseRectStartX:Number;//点击截图层的x坐标
	         private var _mouseRectStartY:Number;//点击截图层的y坐标
	         private var _mouseRectStartX_Move:Number;//点击位与组件顶点坐标的x坐标差值
	         private var _mouseRectStartY_Move:Number;//点击位与组件顶点坐标的y坐标差值
	         private var _videoPoint:Point;//初始化视频播放组件的x。y坐标点位


             private var m_pictureData:String;
             public function callWrapper(photoStr:String):void {	
		            var f:String = "savePhoto";	            
		            var m:String = ExternalInterface.call(f,photoStr);
             }
             private function initApp():void
             {
                // t_btn_Shooting.enabled = false;
                // t_ban_Save.enabled = false;
                 initCamera();
                 _cutImageArea.drawRoundRect(_cutImageArea.x-1,_cutImageArea.y-1,_cutImageArea.width+1,_cutImageArea.height+1,null,0x000000);

                 _cutImageArea.doubleClickEnabled=true;
			     _cutImageArea.addEventListener(MouseEvent.DOUBLE_CLICK,mouseDobleClick,false,0,true);
                 _cutImageArea.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler,false,0,true);              
                 c_panel_Picture.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler,false,0,true);               
             }
            private function mouseDownHandler(evt:MouseEvent):void{//鼠标双击事件助手方法
	            _mouseRectStartX=evt.stageX;        	  
				_mouseRectStartY=evt.stageY;
				_mouseRectStartX_Move=evt.stageX-_cutImageArea.x;
				_mouseRectStartY_Move=evt.stageY-_cutImageArea.y;//计算y坐标位移量
				_videoPoint=t_vd_Video.contentToGlobal(new Point(t_vd_Video.x,t_vd_Video.y));//计算x坐标位移量
				_cutImageArea.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler); 
            }
            private function mouseMoveHandler(evt:MouseEvent):void{//鼠标移动事件助手方法
            evt.updateAfterEvent();
		    var maxX:Number=evt.stageX;
		    var maxY:Number=evt.stageY;

		    var x:Number=maxX-_mouseRectStartX_Move;//计算鼠标x轴的位移量
		    var y:Number=maxY-_mouseRectStartY_Move;//计算鼠标y轴的位移量
		    if(x<0){
		      x=0;
		    }
		    if(y<0){
		       y=0;
		    }
		    if(x>(t_vd_Video.width-_cutImageArea.width)){
		       x=t_vd_Video.width-_cutImageArea.width;
		    }
		    if(y>(t_vd_Video.height-_cutImageArea.height)){
		       y=t_vd_Video.height-_cutImageArea.height;
		    }
		       _cutImageArea.move(x,y);			   
           }
            private function mouseUpHandler(evt:MouseEvent):void {//鼠标弹起事件助手方法                          
			  _cutImageArea.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
	        } 
	        private function mouseDobleClick(ent:MouseEvent):void{
	             SnapshotPicture();//双击等于拍照
	         } 
             //初始化摄像头
             private function initCamera():void//初始化摄像头方法
             {
                 m_camera = Camera.getCamera();
                 if(m_camera != null)
                 {
                     m_camera.addEventListener(StatusEvent.STATUS,__onCameraStatusHandler);                   
                     m_camera.setMode(DEFAULT_CAMERA_WIDTH,DEFAULT_CAMERA_HEIGHT,30);
                     m_localVideo = new Video();
                     m_localVideo.width = DEFAULT_CAMERA_WIDTH;
                     m_localVideo.height = DEFAULT_CAMERA_HEIGHT;
                     m_localVideo.attachCamera(m_camera);
                     t_vd_Video.addChild(m_localVideo);
                 }
                 else
                 {
                     Alert.show("没有找到摄像头，是否重新查找。","提示：",Alert.OK|Alert.NO,this,__InitCamera);
                     return;
                 }
             }

             //拍照按钮事件，进行视频截图
             private function SnapshotPicture():void
             {

                m_pictureBitmapData=ImageSnapshot.captureBitmapData(t_vd_Video);    

                saveImage(checkIntersection());


             }

            //************************************************************************************************
            //* 以下方法为图片保存方法，callWarpper为将图片放入到js里面
            //* 
            //* t_ws_SavePicture.example(imgBye) 为通过webservice传输对文件进行保存 此处保存的为bsae64编译过的图片字节数组
            //  到服务器需用base64将此字符串转为byte[]后进行硬盘存储或数据库存储
            //需要在页面js中写入以下内容
            //首先引入swfobject  <script language="javascript" type="text/javascript" src="js/userjs/swfobject.js"></script>
            //引入swf
            //var flashvars = {};
			//swfobject.embedSWF("/newfrm/swf/photo.swf", "p", "223", "270", "9.0.0", "expressInstall.swf",flashvars);
            //第二个参数为盛放swf的div的id
            //继续添加以下代码 savePhoto（）供swf回调  将转为base64码的图片字符串封装到photostr
            //var photostr="";
		    //function savePhoto(photoStr){
		    // photostr=photoStr;
		    //}
            //
            //
            //* 
            //********************************************************************************************
            private function saveImage(bitmapData:BitmapData):void{//保存图片
            		var jpg:JPEGEncoder=new JPEGEncoder(100);//实例化一个jpeg的转码器
            		var imgBye:ByteArray=jpg.encode(bitmapData);//将图片位图保存为用JPEG编码的格式的字节数组
            	try{
            		var photoStr:String=Base64.encodeByteArray(imgBye);//将文件字节数组用base64组件编译为base64字符串 此处使用as3crypto库里面的base64进行转码 

            		callWrapper(photoStr);//将字符串存于js对象中
            		// t_ws_SavePicture.example(imgBye);//通过webservice进行保存
                }catch(e:Error){
            	 // trace(e.getStackTrace());

            	}

            }
             //检测摄像头权限事件
             private function __onCameraStatusHandler(event:StatusEvent):void
             {
                 if(!m_camera.muted)
                 {
                     //t_btn_Shooting.enabled = true;
                 }
                 else
                 {
                     Alert.show("无法链接到活动摄像头，是否重新检测。","提示：",Alert.OK|Alert.NO,this,__InitCamera);
                 }
                 m_camera.removeEventListener(StatusEvent.STATUS,__onCameraStatusHandler);
             }

             //当摄像头不存在，或连接不正常时重新获取
             private function __InitCamera(event:CloseEvent):void
             {
                 if(event.detail == Alert.OK)
                 {
                     initApp();
                 }
             }

             //WebService保存图片成功事件
             private function __onSavePictureResult(event:ResultEvent):void
             {
                // trace(event.result);

                 if(event.result.toString() == "保存成功")
                 {
                     Alert.show(event.result.toString(),"提示",Alert.OK,this,__onAlertCloseHandler);
                 }
                 else
                 {
                     Alert.show(event.result.toString(),"提示",Alert.OK);
                 }
             }

             //连接WebService失败事件
             private function __onSavePictureFault(event:FaultEvent):void
             {
                 //Alert.show(event.fault.toString(),"提示",Alert.OK);
                 // trace(event);
                // Alert.show("连接WebService失败。"+event,"提示",Alert.OK);
             }

             //保存图片成功后的弹出窗口确认事件
             private function __onAlertCloseHandler(event:CloseEvent):void
             {
                 if(event.detail == Alert.OK)
                 {
                     //trace("转向页面");
                 }
             }
             //*********************************************************************************************
             //**以下为截图方法
             //**此方法内以上其他所注释的代码为在一bitmapdata的矩形区域内实例化另外一个此矩形区域的bitmapdata
             //**
             //**第二种方法则直接使用图片举证进行截图操作
             //**
             //**
             //*************************************************************************
              private function checkIntersection():BitmapData {                



			//var bitmapData:BitmapData=new BitmapData(t_vd_Video.width,t_vd_Video.height,true,0); 
			//var rec:Rectangle=new Rectangle(_cutImageArea.x,_cutImageArea.y,_cutImageArea.width,_cutImageArea.height);					 
			//bitmapData.draw(t_vd_Video,null,null,null,rec);
			//var by:ByteArray=bitmapData.getPixels(rec);
			//var b2:BitmapData=new BitmapData(_cutImageArea.width,_cutImageArea.height,true,0);
			//by.position=0;
			//b2.setPixels(new Rectangle(0,0,_cutImageArea.width,_cutImageArea.height),by);
			//t_img_Picture.source=new Bitmap(b2);// 

		//*****************以上为截图的第一种方法*******************************************************************************************	
		    var bitmapData1:BitmapData=new BitmapData(_cutImageArea.width,_cutImageArea.height,true,0);
			var rec:Rectangle=new Rectangle(0,0,_cutImageArea.width,_cutImageArea.height);
			var m:Matrix=new Matrix(1,0,0,1,-_cutImageArea.x,-_cutImageArea.y);//实例化一举证
			bitmapData1.draw(t_vd_Video,m,null,null,rec);
		    t_img_Picture.source=new Bitmap(bitmapData1);


		//****************以上为截图的第二种方法******************************************************************************
			 t_vd_Video.visible=false;
			 t_img_Picture.visible=true;
			 t_img_Picture.doubleClickEnabled=true;
			 t_img_Picture.addEventListener(MouseEvent.DOUBLE_CLICK,rePhoto,false,0,true);


			 _cutImageArea.removeEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
			 _cutImageArea.visible=false;
			 t_btn_Shooting.visible=false;
			 this.initialize();
			 return bitmapData1;
            }
           private function rePhoto(object:Object=null):void{
           	    t_img_Picture.removeEventListener(MouseEvent.DOUBLE_CLICK,rePhoto);
                t_img_Picture.visible=false;
                t_vd_Video.visible=true;
                _cutImageArea.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler,false,0,true);
                _cutImageArea.visible=true;
                 t_btn_Shooting.visible=true;
           }
         ]]>
     </mx:Script>  
     <mx:Panel id="c_panel_Picture" x="0" y="0" width="223" height="312" layout="absolute" title="" fontSize="12" styleName="pa">
         <mx:VideoDisplay id="t_vd_Video" width="203" height="257" />
         <mx:Image id="t_img_Picture" x="0" y="0"  horizontalCenter="-0" verticalCenter="-0" visible="false" themeColor="haloSilver"/>
         <mx:Canvas id="_cutImageArea" width="140" height="190" backgroundColor="#221C1C" backgroundAlpha=".3"  x="31.5" y="34" borderColor="#FFFFFF" borderStyle="solid" borderThickness="1" themeColor="#009AFB" cornerRadius="0" alpha="1">
         </mx:Canvas>               
         <mx:ControlBar horizontalAlign="right" height="48" y="261" width="213">
             <mx:Button id="t_btn_Shooting" label="拍照" click="SnapshotPicture()"/>
             <mx:Button id="r_paizhao" label="重拍"  click="rePhoto()"/>
         </mx:ControlBar>
     </mx:Panel>
</mx:Application>

下面是效果图
[img]http://dl.iteye.com/upload/attachment/278697/5e41121b-480c-3a69-a7a3-f9498cf52ed2.jpg[/img]

实际操作前请看saveImage()方法上面的注释