日期:2014-05-16  浏览次数:20419 次

jsp证件照实现代码

实现思路如下:

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