前段时间一个系统在用户注册的时候必须让用户将相片一同上传 考虑到用户必须要到相片的电子版元件比较麻烦 所以做了个在线照相的功能 不敢独享成果 这里给大家分享源码出来 希望各位在用到的时候样式改动一下
简单叙述一下：代码里面有两种提交照片的方式 一种是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#源码是基于Adobe Flex技术与C#后端开发的一种应用程序，它允许用户在网页上实现在线拍照功能。Flex是一种开源的、基于ActionScript的框架，用于构建富互联网应用程序（RIA）。C#则是一种面向对象的...
标题中的“flex C# 在线拍照”涉及到的技术领域是Web开发，主要是在客户端使用Adobe Flex技术和后端的C#语言来实现用户通过浏览器在线拍照并上传的功能。Flex是一款用于构建富互联网应用程序（RIA）的开源框架，而C#...
Flex在线拍照功能(附源码) 功能：在线拍照 简介：用flex与java结合实现在线拍照 需求：为了满足希望通过摄像头拍照的图片，然后通过服务器来展示需要。 原帖地址：...
本项目名为“JSP网上在线拍照源码”，它利用Adobe Flex插件实现了在网页上进行实时拍照的功能。本文将详细讲解这一技术实现的原理和步骤。 首先，**JSP（JavaServer Pages）** 是一种基于Java的动态网页技术，它...
Flash+C#在线拍照源码 使用flex+fluorineFx+webservices（C#） 其中注意的是.net环境与flex环境的结合，fluorineFx的引用，端口的配置。代码是没多少难度的，网上有很多资料。 .net flex（FluorineFX） 项目建立...
【标题】"FLEX在线照相"涉及到的技术和知识点主要集中在使用Adobe Flex开发Web应用程序，尤其是构建一个在线拍照和图像处理的功能。Flex是基于ActionScript 3.0的开源框架，用于创建富互联网应用程序（RIA），它允许...
压缩包内的文件"图片动画]Flash+C#在线拍照源码_flexphoto"可能是整个项目的主文件或示例代码，其中“flexphoto”可能是一个项目或类库的名字，暗示了它可能是一个基于Flex（Adobe的Flash开发工具）的组件，用于处理...
【ASP.NET C# + Flex 在线拍照视频源码详解】 ASP.NET C# 和 Flex 的结合在Web开发中常用于创建富互联网应用程序（RIA），尤其在处理动态交互和多媒体功能时。本源码提供了在线拍照的功能，是Web应用中常见的用户...
【ASP.NET源码——[图片动画]Flash+C424在线拍照源码.zip】这个压缩包文件主要包含了一个基于ASP.NET技术开发的在线拍照应用程序，它整合了Flash技术和C#编程语言，为用户提供了一种通过网页进行实时拍照或上传图片...
总结来说，"Flash+C#在线拍照带源码"系统利用Flash的多媒体处理能力和C#的服务端处理能力，结合FluorineFx的AMF通信，构建了一个高效、实时的在线拍照解决方案。通过理解并掌握这些关键技术和组件，开发者不仅可以...
标题中的“在线拍照 c# flex+fluorineFx+webservices”揭示了这是一个基于C#技术，使用Flex前端和FluorineFx作为SOAP Web服务客户端库的在线拍照系统。让我们详细了解一下这些关键技术点。 **C#（Sharp）**： C#是...
通过上述知识点的学习和实践，开发者可以构建一个功能完备的Flex Web应用，使用户能够在浏览器中方便地使用摄像头拍照并保存图片。这篇博客文章（链接已给出）可能详细介绍了这个过程，包括示例代码和最佳实践，对于...
《深入探索Flash MX/Flex源码：以"zhaoxiangji2.rar"为例》 在数字媒体领域，Flash MX/Flex源码是开发者的重要工具，它们为创建交互式、动态的网页内容提供了无限可能。本文将以"zhaoxiangji2.rar"为例，深入剖析...
总之，这个Flex项目展示了如何利用Flex和Adobe AIR在iOS及Android设备上实现相机功能，包括预览、拍照和处理捕获的图像。开发者可以通过学习这个项目，深入了解Flex的跨平台开发能力和与硬件的交互方式。
Flash+C#在线拍照源码使用flex+fluorineFx+webservices（C#）其中注意的是.net环境与flex环境的结合，fluorineFx的引用，端口的配置。代码是没多少难度的，网上有很多资料。.netflex（FluorineFX）项目建立参考：1....
基于B/S架构的考试系统，参考现有考试系统，实现章节管理，试题管理，试卷管理，考生管理 ，权限管理，考务管理，增加了视频...使用随机拍照并比对图片来防作弊，前台的拍照上传使用flex，图片分析使用JNI调用C++模块。
分析这些源码可以帮助理解如何在实际项目中实现摄像头拍照功能。 5. **工具**：标签中的“工具”可能指的是与开发、调试或部署Flash应用相关的工具，如Flash Professional（用于制作动画和交互式内容的IDE），Flash...