前段时间一个系统在用户注册的时候必须让用户将相片一同上传 考虑到用户必须要到相片的电子版元件比较麻烦 所以做了个在线照相的功能 不敢独享成果 这里给大家分享源码出来 希望各位在用到的时候样式改动一下
简单叙述一下：代码里面有两种提交照片的方式 一种是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>
下面是效果图
实际操作前请看saveImage()方法上面的注释
- 大小: 9.1 KB
分享到：
相关推荐
flex 在线拍照C#源码
Flex在线拍照功能(附源码) 功能：在线拍照 简介：用flex与java结合实现在线拍照 需求：为了满足希望通过摄像头拍照的图片，然后通过服务器来展示需要。 原帖地址：...
FLEX在线拍照源码 js与FLEX通信 .net与FLEX通信
Flash+C#在线拍照源码 使用flex+fluorineFx+webservices（C#） 其中注意的是.net环境与flex环境的结合，fluorineFx的引用，端口的配置。代码是没多少难度的，网上有很多资料。 .net flex（FluorineFX） 项目建立...
利用FLEX插件实现JSP网上拍照，在使用前要先安装Flex插件，官网上有下载，不够要注册用户才行。
Flash+C#在线拍照系统，带源码 使用flex+fluorineFx+webservices（C#） 其中注意的是.net环境与flex环境的结合，fluorineFx的引用，端口的配置。
NULL 博文链接：https://hfkiss44.iteye.com/blog/714225
Flash+C#在线拍照源码使用flex+fluorineFx+webservices（C#）其中注意的是.net环境与flex环境的结合，fluorineFx的引用，端口的配置。代码是没多少难度的，网上有很多资料。.netflex（FluorineFX）项目建立参考：1....
这是一个flash源文件，效果很好，测试平台为flash 8.0（如果提示问题请选择合适的版本试试），代码的效果是：照相机的效果。源码
基于B/S架构的考试系统，参考现有考试系统，实现章节管理，试题管理，试卷管理，考生管理 ，权限管理，考务管理，增加了视频...使用随机拍照并比对图片来防作弊，前台的拍照上传使用flex，图片分析使用JNI调用C++模块。