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

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.csdn.net/detail/maskice/9783060

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

AngularJS中使用HTML5手机摄像头拍照
1. 项目背景公司开发一个网站,在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能.因为我们网站是基于Html5进行开发,所以就直接采用H5来实现拍照.起初觉得这个功能很简单,但是 ...
Html5调用摄像头拍照
Html5调用摄像头拍照,ArcSort头像识别. 背景: 用户需要统一采集头像传入系统,利用ArcSort识别头像知道绑定的用户,完成后续业务. 使用相关:HTML,JS,Spring Boot/C ...
利用python调用本地摄像头拍照，对图片命名并保存到指定位置，带界面
1.需求: 因项目需要做一个以图搜图的小程序,需要储备零件图库,约1000种 2.原计划&痛点原本想通过手机挨个拍照,再拷贝出来,重命名,这样会耽误大量时间,且容易出错 3.解决方案于是做 ...
html5摄像头拍照保存图片,[转载]HTML5在线摄像头拍照上传并保存到服务器的应用...
1.//读取视频流 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; if (navig ...
html 摄像头代码,web HTML5 调用摄像头的代码
html5调用摄像头拍照 #camera{width:640px;height:525px;position:fixed;border:1px solid #f0f0f0;-moz-border-ra ...
html5调用摄像头实例
最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章,但各有瑕疵.于是自己查阅书籍写了一个demo,主要分三步,废话不多说上代码. HTML代码部分: <!--video用于 ...
Ionic系列——调用摄像头拍照和选择图库照片功能的实现
2019独角兽企业重金招聘Python工程师标准>>> 1.需求描述最近要做一个功能就是调用摄像头拍照,然后上传照片的功能,或者直接打开图库选择照片然后上传. 2.准备 ①.添加插 ...
input调起ios摄像头拍照旋转问题解决思路
背景 input标签调起ios原生摄像头拍照时,上传照片发现照片向左旋转了90度旋转的原因: 手机拍照会给图片添加一个Orientaion信息(即拍照方向),如下: 用ios手机拍照,系统会给图片加 ...
AngularJS中使用HTML5摄像头拍照
1. 项目背景公司开发一个网站,在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能.因为我们网站是基于Html5进行开发,所以就直接采用H5来实现拍照.起初觉得这个功能很简单,但是 ...

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

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

最新文章

热门文章