这几天好多人问我如何在asp程序中控制摄像头去抓拍照片,asp技术还是99年的时候看过一点点,早就着米饭吃了,不过既然有人问,那就是看得起咱,花了一个晚上的时间把asp程序调用摄像头拍照的问题搞定了,现记录如下,让有类似需求的同学可以少走些弯路。

 

用到的技术:

1.asp程序中作base64编码和解码,使用的是msxml组件,其实主要是用来对摄像头采集到的二进制图片数据做处理,因为不可能让用户拍完照片以后再手动上传,而且程序也没办法控制实现自动文件上传,所以在前台的网页中拍照片以后要对照片数据做base64编码处理,然后提交到服务器端以后做base64解码处理。

 

2.activex技术

   控制各种各样的摄像头去拍照,用纯网页肯定是不可能的了,这里的拍照片功能使用的是activex技术,做了一个activex控件,实现了照片的裁剪,转黑白化处理,缩放等等功能,类似于photo的图片裁剪功能,实现的关键点在于用鼠标选择裁剪区域,以及拖动裁剪区域等。采集以后的照片数据在程序中做了标准base64编码处理,便于网络数据传输。

 

3.数据传输

   其实这个不光是和摄像头控件或者摄像头拍照有关系,所有的在http通讯协议中传输的base64数据都有这种情况,因为http method分为get方式和post方式,而get方式在个别浏览器上的实现有所限制,如最大的数据量不能大于多少K,所以要在http通讯协议下传输大数据量的东西,要选择post方式去处理。

 

4.activex技术与服务区端asp程序的交互

   客户端浏览器中操作摄像头进行抓拍处理是activex控件完成的,但是activex控件的数据并不能直接 submit到服务器端处理,也就是说asp代码中你想直接取摄像头的照片数据是取不到的,那就需要把客户端浏览器中的activex控件拍照的数据拿出来,让服务器端的asp程序代码可以访问到照片数据,这样就需要有个“代理”或者叫做“中转站”的东西去做这个事情,其实说白了很简单,就是我们的activex数据不能直接提交,你要放在文本框里面或者hidden隐藏元素里面去提交给asp程序.

 

5. 照片数据保存

   服务器端收到的照片数据是base64字符串,这些字符串怎么才可以转变成二进制的图片数据呢?这里面还涉及到一个将base64数据解码以后写二进制文件的问题,既然涉及到写文件,就需要对web项目的安全权限做一些设定,偷懒的办法是给everyone完全控制权限就可以了。

 

以上的是技术思路和实现方案,来点干的吧,直接上代码:

 

 

<%@ LANGUAGE=VBScript CodePage=65001%>
<%
private function decodeBase64(base64) 
   dim DM, EL 
   Set DM = CreateObject("Microsoft.XMLDOM") 
   Set EL = DM.createElement("tmp") 
   EL.DataType = "bin.base64"
   EL.Text = base64 
   decodeBase64 = EL.NodeTypedValue 
end function


dim data

data=decodeBase64(request.Form("pic_data"))


set stm=Server.CreateObject("ADODB.Stream")
'stm.Mode=adSaveCreateOverWrite 'adModeReadWrite
stm.type=1
stm.open
stm.Write(data)
stm.SaveToFile Server.MapPath("./") & "/" & request.Form("desc") & ".jpg",2
stm.Close
set stm=nothing

 

response.write "<img src='" & request.Form("desc") & ".jpg" & "'/>"

response.write "desc:" & request.Form("desc")
response.end

%>

 

 

华丽的分割线以下为前台操作摄像头拍照的html页面源代码

---------------------------------------------------------------------------------------------------

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>video cap control demo</title>
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="test1.js"></script>
</head>
<body>
 
<form action="test1.asp" id="cap_form" method="post">
<input type="hidden"  id="picData" name="picData">
<object classid="clsid:34681DB3-58E6-4512-86F2-9477F1A9F3D8"
 id="WebVideoCap1" codebase="./cabs/Package.cab#version=1,0,0,50" width="636" height="238">
 <param name="Visible" value="0">
 <param name="AutoScroll" value="0">
 <param name="AutoSize" value="0">
 <param name="AxBorderStyle" value="1">
 <param name="Caption" value="WebVideoCap">
 <param name="Color" value="4278190095">
 <param name="Font" value="宋体">
 <param name="KeyPreview" value="0">
 <param name="PixelsPerInch" value="96">
 <param name="PrintScale" value="1">
 <param name="Scaled" value="-1">
 <param name="DropTarget" value="0">
 <param name="HelpFile" value>
 <param name="PopupMode" value="0">
 <param name="ScreenSnap" value="0">
 <param name="SnapBuffer" value="10">
 <param name="DockSite" value="0">
 <param name="DoubleBuffered" value="0">
 <param name="ParentDoubleBuffered" value="0">
 <param name="UseDockManager" value="0">
 <param name="Enabled" value="-1">
 <param name="AlignWithMargins" value="0">
 <param name="ParentCustomHint" value="-1">
 <param name="jpegBase64Data" value>
 <param name="bmpBase64Data" value>
</object>
<hr/>

<input type="hidden" name="pic_data" id="pic_data"/>
照片描述:<input type="text" name="desc" id="desc"/>

<input type="button" value="照相" id="btn_cap"/>

<input type="button" value="提交" id="btn_submit"/>

</form>
</body>
</html>

 代码下载地址点这里 

---------------------------------------------------------------------------------