实现思路如下:
1.设置好拍照背景,如使用红布或者蓝布等等,白墙也可以。
2.选择高清的摄像头,如罗技等高清摄像头,支持的分辨率越高越好。
3.使用imagecaponweb处理拍照。
4.调用控件的start方法开始获取摄像头视频
5.调用cap()方法拍照
6.调用selectrect方法选中头像区域,不满意的话可以手动微调。
7.调用cutselected方法裁剪使用选中区域
8.保存拍照结果。
代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>控件测试页面</title>
<script type="text/javascript">
function startcam(){
var capactivexobject=document.getelementbyid('cap1');
//启动摄像头
capactivexobject.start();
}
function cappicture1(){
var capactivexobject=document.getelementbyid('cap1');
capactivexobject.cap(); //控制摄像头拍照
}
function selectpic(){
var capactivexobject=document.getelementbyid('cap1');
capactivexobject.selectrect(0.3,0.25,0.6,0.8);//具体含义请查看文档
}
function cutselectedpic(){
var capactivexobject=document.getelementbyid('cap1');
capactivexobject.cutselected();
}
function submittoserver(){
//读取控件的拍照结果到hidden输入项中
var base64_data1 = document.getelementbyid('cap1').jpegbase64data;
if (base64_data1.length==0) {
alert('请先拍照!');
return false;
}
document.getelementbyid('picdata1').value=base64_data1;
document.getelementbyid('picext1').value='.jpg';
/*注意不同的服务器端技术要配置不同的接收数据的url,可以参考submit.html的示
如asp.net的程序员可以查看submit.aspx,php程序员可以查看submit.php,asp程序员可以查看submit.asp
*/
//document.forms[0].action="http://localhost:8080/pages/submit.jsp";
alert('请先打开demo6.html配置服务器端程序参数再继续测试!');
return false;
document.forms[0].submit();
}
</script>
</head>
<body>
<form method="post" >
<input type="hidden" id="picdata1" name="picdata1"/>
<input type="hidden" id="picext1" name="picext1"/>
<input type="hidden" id="picdata2" name="picdata2"/>
<input type="hidden" id="picext2" name="picext2"/>
<p>
<input type="button" value="启动摄像头" onclick="javascript:startcam();" />
<input type="button" value="拍照片" onclick="javascript:cappicture1();" />
<input type="button" value="选中头像区域" onclick="javascript:selectpic();" />
<input type="button" value="裁剪选中区域" onclick="javascript:cutselectedpic()" />
<input type="button" value="提交到服务器端" onclick="javascript:submittoserver();" /> <br/>
<input type="button" value="清除结果" onclick="javascript:document.getelementbyid('cap1').clear();" />
</p>
<object classid="clsid:34681db3-58e6-4512-86f2-9477f1a9f3d8" id="cap1" width="640" height="480" codebase="../cabs/imagecaponweb.cab#version=2,0,0,0">
<param name="visible" value="0">
<param name="autoscroll" value="0">
<param name="autosize" value="0">
<param name="axborderstyle" value="1">
<param name="caption" value="scaner">
<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="licensemode" value="2">
<param name="key1" value="">
<param name="key2" value="">
</object>
</form>
<script type="text/javascript">
document.all.cap1.switchwatchonly(); //切换到只显示摄像头画面形式,隐藏编辑按钮等图标.
</script>
</body>
</html>
<%@ page contenttype="text/html; charset=utf-8" language="java" import="java.sql.*,java.io.*" errorpage="" %>
<%
string savepath=config.getservletcontext().getrealpath("/")+"//";
file tmp_path=new file(savepath);
tmp_path.mkdirs();
system.out.println("照片数据保存路径:"+savepath);
string pic_base_64_data=request.getparameter("picdata");
//如果下面的代码输出true则说明需要调整服务器软件工作参数,解决接受post数据的大小限制问题,例如
//tomcat的话需要在server.xml中配置maxpostsize="0"来解除上传数据的大小限制 <connector port="8080" protocol="http/1.1"
// connectiontimeout="20000"
// redirectport="8443" maxpostsize="0"/>
//
system.out.println(null==pic_base_64_data);
system.out.println("base64 string length:"+pic_base_64_data.length());
string fileformat=request.getparameter("picext");
sun.misc.base64decoder decode=new sun.misc.base64decoder();
byte[] datas=decode.decodebuffer(pic_base_64_data);
string filename=string.valueof(system.currenttimemillis())+fileformat;
file file=new file(savepath+filename);
outputstream fos=new fileoutputstream(file);
system.out.println("图片文件名称:"+filename);
fos.write(datas);
fos.close();
out.print("<a href='" + request.getcontextpath()+"/"+ filename + "'>click here</a>");
out.flush();
out.close();
%>