Chrome 谷歌浏览器调用摄像头并拍照上传 java示例

最新推荐文章于 2023-11-22 14:00:29 发布

琦翁

最新推荐文章于 2023-11-22 14:00:29 发布

阅读量5.8k

点赞数 1

分类专栏： Html5 文章标签： chrome 摄像头 html5拍照

本文链接：https://blog.csdn.net/lozi1020/article/details/45816523

版权

Html5 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

html页面：

<!DOCTYPE html>
<html>
<head>
	<title>html5调用摄像头实现拍照</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="text/javascript" src="assets\js\jquery-2.0.3.min.js" ></script>
</head>
<body>
<video id="video" autoplay=""style='width:640px;height:480px'></video>
<button id="paizhao">拍照</button> 
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
	var video=document.getElementById("video");
	var context=canvas.getContext("2d");
	var errocb=function(){
		console.log("sth srong");
	}
	if(navigator.getUserMedia){
		navigator.getUserMedia({"video":true},function(stream){
			video.src=stream;
			video.play();
		},errocb);
	}else if(navigator.webkitGetUserMedia){
		navigator.webkitGetUserMedia({"video":true},function(stream){
			video.src=window.webkitURL.createObjectURL(stream);
			video.play();
		},errocb);
	}
	document.getElementById("paizhao").addEventListener("click",function(){
		context.drawImage(video,0,0,640,480);
		var canvas=document.getElementById("canvas");
		var imgData=canvas.toDataURL("image/png");
		var data=imgData.substr(22);
		$.ajax({
			url:'CanvasServlet',
			data:{
				imedata:data
			},
			type:'post',
			success:function(data){
				if(data=='true'){
					alert('上传成功');
				}else{
					alert('上传失败');
				}
			}
			
		});
	});
</script>
</body>
</html>

servlet后台接收并保存：

package com.servlet;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;

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 sun.misc.BASE64Decoder;

/**
 * Servlet implementation class CanvasServlet
 */
@WebServlet("/CanvasServlet")
public class CanvasServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CanvasServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String base64Data = request.getParameter("imedata");
		System.out.println(base64Data);
		if(base64Data!=null){
			BASE64Decoder deoder = new BASE64Decoder();
			try {
				byte[] b = deoder.decodeBuffer(base64Data);
				for(int i = 0 ; i<b.length;i++){
					if(b[i]<0){//调整异常数据
						b[i]+=256;
					}
				}
				File f = new File("e://canvas");
				if(!f.exists()){
					f.mkdir();
				}
				//生成图片
				String filepath = "e://canvas//1.png";
				
				OutputStream out1 = new FileOutputStream(filepath);
				out1.write(b);
				out1.flush();
				out1.close();
				rs(response,"true");
			} catch (Exception e) {
				// TODO: handle exception
				e.printStackTrace();
				rs(response,"false");
			}
		}else{
			rs(response,"false");
		}
		
	}
	
	public void rs(HttpServletResponse response,String rs){
		PrintWriter out;
		try {
			out = response.getWriter();
			out.print(rs);
			out.flush();
			out.close();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
}

琦翁

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Chrome 谷歌浏览器调用摄像头并拍照上传 java示例

html页面： html5调用摄像头实现拍照拍照 var video=document.getElementById("video"); var context=canvas.getContext("2d"); var errocb=function(){ console.log("sth srong"); } if(navigator.getUs
复制链接

扫一扫