Home > Article > Backend Development > jsp ID photo implementation code

jsp ID photo implementation code

巴扎黑Original: 2016-11-29 10:21:261584browse

The implementation idea is as follows:

1. Set up the photo background, such as using red cloth or blue cloth, etc. White walls are also acceptable.

2. Choose a high-definition camera, such as Logitech and other high-definition cameras. The higher the resolution supported, the better.

3. Use ImageCapOnWeb to process photos.

4. Call the start method of the control to start acquiring the camera video

5. Call the cap() method to take pictures

6. Call the selectRect method to select the avatar area. If you are not satisfied, you can manually fine-tune it.

7. Call the cutSelected method to crop the selected area

8. Save the photo results.

The code is as follows:

<!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(&#39;cap1&#39;);
//启动摄像头
capActivexObject.start();
}
function capPicture1(){
var capActivexObject=document.getElementById(&#39;cap1&#39;);
capActivexObject.cap(); //控制摄像头拍照
}
function selectPic(){
var capActivexObject=document.getElementById(&#39;cap1&#39;);
capActivexObject.selectRect(0.3,0.25,0.6,0.8);//具体含义请查看文档
}
function cutSelectedPic(){
var capActivexObject=document.getElementById(&#39;cap1&#39;);
capActivexObject.cutSelected();
}
function submitToServer(){
//读取控件的拍照结果到hidden输入项中
var base64_data1 = document.getElementById(&#39;cap1&#39;).jpegBase64Data;
if (base64_data1.length==0) {
alert(&#39;请先拍照!&#39;);
return false;
}
document.getElementById(&#39;picData1&#39;).value=base64_data1;
document.getElementById(&#39;picExt1&#39;).value=&#39;.jpg&#39;;
/*注意不同的服务器端技术要配置不同的接收数据的url,可以参考submit.html的示
如asp.net的程序员可以查看submit.aspx，php程序员可以查看submit.php，asp程序员可以查看submit.asp
*/
//document.forms[0].action="http://localhost:8080/pages/submit.jsp";
alert(&#39;请先打开demo6.html配置服务器端程序参数再继续测试!&#39;);
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(&#39;cap1&#39;).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=&#39;" + request.getContextPath()+"/"+ filename + "&#39;>click here</a>");
out.flush();
out.close();
%>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to php caching technology and implementation code of php cachingNext article：Detailed introduction to php caching technology and implementation code of php caching

See more

jsp ID photo implementation code

Related articles