jsp 신분증 사진 구현 코드
- 巴扎黑원래의
- 2016-11-29 10:21:261625검색
구현 아이디어는 다음과 같습니다.
1. 빨간색 천이나 파란색 천 등을 사용하여 사진을 찍을 배경을 설정합니다. 흰색 벽도 허용됩니다.
2. 로지텍 등 고화질 카메라를 선택하세요. 지원되는 해상도가 높을수록 좋습니다.
3. ImageCapOnWeb을 사용하여 사진을 처리합니다.
4. 컨트롤의 시작 메소드를 호출하여 카메라 영상 획득을 시작합니다
5. 사진 촬영을 위해 cap() 메소드를 호출합니다
6. 아바타 영역을 선택하고 만족스럽지 않으면 수동으로 미세 조정할 수 있습니다.
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();
%>성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.