jsp摄像头编程示例代码

本文介绍了一个使用HTML、JavaScript和Java实现的简单网页应用,该应用允许用户通过浏览器启动摄像头、拍照并将图片以Base64编码的形式上传到服务器。服务器端接收Base64编码的数据并将其转换为图片文件进行保存。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!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 language="javascript" type="text/javascript" src="../js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
$(function() {
			$('#btnUpload1').click(function() {
				submit_1();

			})
});

function auto_select_server_action(){
	var server_action_url;
    if ($('#asp').attr("checked")==true) {
	  server_action_url="./submit.asp";
	}else if ($('#jsp').attr("checked")==true) {
	  server_action_url="http://localhost:8080/pages/submit.jsp";
    }else if ($('#php').attr("checked")==true) {
 	  server_action_url="./submit.php";
    }else if ($('#aspnet').attr("checked")==true) {
	  server_action_url="./submit.aspx";
    } else{
      alert('请选择服务器端技术类型!');
	  return ;
    }
   document.forms[0].action=server_action_url;
}

function submit_1(){
  auto_select_server_action();
  var base64_data = document.getElementById('cap1').jpegBase64Data;  
  document.getElementById('picData').value=base64_data;
  document.getElementById('picExt').value='.jpg'; 
  document.forms[0].submit();
}
</script>
</head>
<body>
<form action="" name="form1" id="form1" method="post" target="_blank">
  <input type="hidden" id="picData" name="picData"/>
  <input type="hidden" id="picExt"  name="picExt"/>
  <p>请选择服务器端技术:
    <label>
      <input name="radio" type="radio" id="asp" value="asp" checked="checked" />
      asp</label>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>
      <input type="radio" name="radio" id="jsp" value="jsp" />
      jsp</label>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>
      <input type="radio" name="radio" id="aspnet" value="asp.net" />
      asp.net</label>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>
      <input type="radio" name="radio" id="php" value="php" />
      php</label>
  </p>
  <p>
  <input type="button" value="启动摄像头" οnclick="javascript:document.getElementById('cap1').start();"  /> 
  <input type="button" value="拍照" οnclick="javascript:document.getElementById('cap1').cap();"  /> 
    <input type="button" value="上传"  id="btnUpload1"/>
  </p>
  <object classid="clsid:34681DB3-58E6-4512-86F2-9477F1A9F3D8" id="cap1" width="100%" height="600" 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="key1" value="">
    <param name="key2" value="">
  </object>
</form>
</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='" + filename + "'>click here</a>");
out.flush();
out.close();
%>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值