html5实现摄像头拍照并使用java进行照片保存

最新推荐文章于 2021-10-07 10:05:00 发布

maskice

最新推荐文章于 2021-10-07 10:05:00 发布

阅读量3.1k

点赞数 3

分类专栏： java 文章标签： html5 摄像头 java

本文链接：https://blog.youkuaiyun.com/maskice/article/details/62418885

版权

java 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何利用HTML5的photobooth_min.js库实现摄像头拍照功能，并通过Java Servlet接收及保存拍摄的照片为文件。

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

html5调用摄像头拍照使用的是photobooth_min.js,这个比较强大还可以直接裁剪，API网址：http://wolframhempel.github.io/photobooth-js/#isSupported

demo jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>测试HTML5相机</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="<%=path %>/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="<%=path %>/js/photobooth_min.js"></script>
  	<style type="text/css">
	  	*{
			margin: 0;
			padding: 0;
			list-style-type: none;
			font: 11px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
			color: #444;
		}
	</style>
  </head>
  
  <body>
   <div id="example" style="width: 600px; height: 360px;">
   </div>
   <div id="gallery"></div>
   <script type="text/javascript">
	  	$(document).ready(function() { 
		  	$('#example').photobooth().on("image",function( event, dataUrl ){
		  		$( "#gallery" ).empty();
		  		$( "#gallery" ).append( '<img src="' + dataUrl + '" >');
		  	});
	  	}); 
  	</script>
  </body>
</html>

jsp中将img的base64直接post到servlet，然后进行保存，servlet代码：

import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.apache.commons.codec.binary.Base64;

import com.aobang.util.ToUTF8;

@WebServlet("/servlet/test")
public class TestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		request.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		JSONObject jsonRes = new JSONObject();
		try {
			// data:image/png;base64,前缀需要去掉
			String base64Code = 这里是base64图片的值;  
	        if(null == base64Code || "".equals(base64Code))  
	        {  
	            System.out.println("null===========");
	        } 
	        String filePath = request.getSession().getServletContext().getRealPath("");
	        String tempSavePath = filePath + File.separator + "test";
	        File logosavedir = new File(tempSavePath);// path1为存放的路径  
	        if (!logosavedir.exists()) {// 如果不存在文件夹，则自动生成  
	            logosavedir.mkdirs();  
	        }  
	        String fileName = tempSavePath + File.separator + new Date().getTime()+".jpg";  
            byte[] bytes = Base64.decodeBase64(new String(base64Code).getBytes());  
              
            ByteArrayInputStream in = new ByteArrayInputStream(bytes);  
            byte[] buffer = new byte[1024];  
            FileOutputStream o = new FileOutputStream(fileName);  
            int byteread = 0;  
            int bytesum = 0; 
            while ((byteread = in.read(buffer)) != -1) {  
            	 bytesum += byteread;  
                o.write(buffer, 0, byteread); // 文件写操作  
                o.flush();  
            }  
            o.close();  
		} catch (Exception e) {
			e.printStackTrace();
		}
		out.print(jsonRes.toString());
		out.flush();
		out.close();
	}

}

代码文件上传到了我的资源里“html5实现摄像头拍照并使用java进行照片保存“，网址： http://download.youkuaiyun.com/detail/maskice/9783060