HTML打开摄像头，进行拍照上传
html代码
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/includes/ctx.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>webcam</title>
<script type="text/javascript" src="${ctx}/js/jquery-1.11.2.js"></script>
<script type="text/javascript">
window.onload = function (){
try{
//动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持
document.createElement("canvas").getContext("2d");
document.getElementById("support").innerHTML = "浏览器支持HTML5 CANVAS";
}catch(e){
document.getElementById("support").innerHTML = "浏览器不支持HTML5 CANVAS";
}
}; //这段代 主要是获取摄像头的视频流并显示在Video 签中
window.addEventListener("DOMContentLoaded", function () {
var video = document.getElementById("video");
var videoObj = { "video": true };
var errBack = function (error){
console.log("Video capture error: " + error.message, error.code);
};
// 支持浏览器 谷歌,火狐,360,欧朋
//navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
} else if (navigator.mozGetUserMedia){
navigator.mozGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
} //这个是拍照按钮的事件，
document.getElementById("snap").addEventListener("click",function(){
CatchCode();
});
}, false);
//定时器
//var interval = setInterval(CatchCode, "300");
//这个是 刷新上 图像的
function CatchCode() {
//实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途
var canvans = document.getElementById("canvas");
var video = document.getElementById("video");
var context = canvas.getContext("2d"); canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video,0,0); //获取浏览器页面的画布对象
//以下开始编 数据
var imgData = canvans.toDataURL("image/jpg");
//将图像转换为base64数据
var base64Data = imgData.split(",")[1]; var xhr = new XMLHttpRequest();
xhr.open("post", "${ctx}/webcam.do", true);
//告诉服务器是以个Ajax 请求
xhr.setRequestHeader("X-Requested-Width", "XMLHttpRequest");
var fd = new FormData();
fd.append("doc",base64Data);
xhr.send(fd); //alert(base64Data); //在前端截取22位之后的字符串作为图像数据
//开始异步上
}
</script>
</head>
<body>
<div id="support"></div>
<div id="contentHolder">
<video id="video" width="160" height="120" style="border:1px solid red" autoplay></video>
<button id="snap"> 拍照</button>
<canvas style="border:1px solid red" id="canvas"></canvas>
</div>
</body>
</html>
后台代码
package com.servlet; import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Date;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload; import sun.misc.BASE64Decoder; /**
* Servlet implementation class webcam
*/
public class webcam extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public webcam() {
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
doPost(request, response);
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;char=utf-8"); // 获得磁盘文件条目工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
// 获取文件需要上传到的路径
// String path = request.getRealPath("/upload");
String path = "d:/shangchuan/"; // 如果文件夹不存在 将创建文件夹
if (!new File(path).exists()) {
new File(path).mkdirs();
} // 如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
// 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
/**
* 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem
* 格式的 然后再将其真正写到 对应目录的硬盘上
*/
factory.setRepository(new File(path));
// 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
factory.setSizeThreshold(1024 * 1024); // 高水平的API文件上传处理
ServletFileUpload upload = new ServletFileUpload(factory); try {
// 可以上传多个文件
List<FileItem> list = (List<FileItem>) upload.parseRequest(request); for (FileItem item : list) {
// 获取表单的属性名字
String name = item.getFieldName(); // 如果获取的 表单信息是普通的 文本 信息
if (item.isFormField()) {
// 获取用户具体输入的字符串 ，名字起得挺好，因为表单提交过来的是 字符串类型的
String imgStr = item.getString(); // base64解码并生成图片
BASE64Decoder decoder = new BASE64Decoder();
try {
// Base64解码
byte[] bytes = decoder.decodeBuffer(imgStr);
// for (int i = 0; i < bytes.length; ++i) {
// if (bytes[i] < 0) {// 调整异常数据
// bytes[i] += 256;
// }
// }
// 生成jpeg图片
OutputStream out = new FileOutputStream("d:/ceshi.jpg");
out.write(bytes);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
// request.setAttribute(name, value);
}else {
// 对传入的非 简单的字符串进行处理 ，比如说二进制的 图片，电影这些
/**
* 以下三步，主要获取 上传文件的名字
*/
// 获取路径名
String value = item.getName();
// 索引到最后一个反斜杠
int start = value.lastIndexOf("\\");
// 截取 上传文件的 字符串名字，加1是 去掉反斜杠，
String filename = value.substring(start + 1);
// 将当前时间戳 作为的文件名
String newfilename = Long.toString(new Date().getTime())
+ filename.substring(filename.indexOf('.'));
request.setAttribute(name, newfilename); // 真正写到磁盘上
// 它抛出的异常 用exception 捕捉 // item.write( new File(path,filename) );//第三方提供的 // 手动写的
OutputStream out = new FileOutputStream(new File(path,
newfilename)); InputStream in = item.getInputStream(); int length = 0;
byte[] buf = new byte[1024]; System.out.println("获取上传文件的总共的容量：" + item.getSize()); // in.read(buf) 每次读到的数据存放在 buf 数组中
while ((length = in.read(buf)) != -1) {
// 在 buf 数组中 取出数据 写到 （输出流）磁盘上
out.write(buf, 0, length);
}
in.close();
out.close();
}
} } catch (FileUploadException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
HTML打开摄像头，进行拍照上传的更多相关文章
- JS打开摄像头并截图上传
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...
- html5调用手机摄像头，实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- 【Demo】HTML5 拍照上传
本文主要讲解 手机浏览器 如何拍照 为什么会有这个需求 最近做一个项目要用到拍照然后上传照片,但是网页拍照一般都是用Flash做的,而我们主要是H5页面,如果在微信里面有权限就可以通过JSSDK调起摄 ...
- webAPP如何实现移动端拍照上传（Vue组件示例）？
摘要:使用HTML5编写移动Web应用,主要是为了尝试一下“一套代码多处运行”,一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然这种方式弊大于利,不 ...
- android 拍照上传文件 原生定位
最近公司需要一个android拍照上传和定位功能的的单一功能页面,一开始选择ionic cordova angular的一套H5框架,但是遇到和上传文件报错的问题,bug找了一天没找到原因,怀疑是io ...
- Android4.4 + WebAPI 实现拍照上传
网上有很多关于拍照上传的实现方法,如果用新版本android去运行有可能会发现根本实现不了.主要原因是android从4.4版本开始通过intent.ACTION_GET_CONTENT打开选择器后, ...
- php实现手机拍照上传头像功能
现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,这个就不是post传递 也不是get函数传递, 这个另外一种数据格式传递,使用的是$GLOBALS ...
- Android仿微信图片上传，可以选择多张图片，缩放预览，拍照上传等
仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...
- php实现视频拍照上传头像功能实例代码
如果要在php中实现视频拍照我们需要借助于flash插件了,由flash拍出的确照片我们再通过php的$GLOBALS ['HTTP_RAW_POST_DATA']接受数据,然后保存成图片就可以了,下 ...
- iOS拍照上传后，在web端显示旋转 Swift＋OC版解决方案
问题描述: 手机头像上传,遇到一个怪现象,就是拍照上传时,手机端显示头像正常,但在web端查看会有一个左旋90度的问题. 并且照片竖怕才会有此问题,横拍不存在. 原因分析: 手机拍照时,用相机拍摄出来 ...
随机推荐
- Oracle学习（11）：PLSQL程序设计
PL/SQL程序结构及组成 什么是PL/SQL? •PL/SQL(Procedure Language/SQL) •PLSQL是Oracle对sql语言的过程化扩展 •指在SQL命令语言中添加了过程处 ...
- unity3d教程运行物理机制
首先,我们将把Hooke定律写Euler方法结合在一起找到新坐标.加速和速度. Hooke定律是F=kx,这里的F是指由水流产生的力(记住,我们将把水体表面模拟为水流),k是指水流的常量.x则是位移. ...
- CSS初步理解
近期在学习牛腩的时候遇到了网页的制作.挺新奇的.其中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间.找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下 ...
- wpf Shake
<Setter Property="RenderTransformOrigin" Value="0.5 0.5" /> <Setter Pro ...
- Mac OS下PHP开发环境的搭建——基于XAMPP和IntelliJ IDEA
简单记录一下在MacOS下,搭建PHP的开发环境吧.其实,从本质上来说,Mac对于PHP的支持还是很好的,默认带了PHP和Apache,但是由于前期对系统本身不熟悉,所以还是略微走了一些弯路--也就是 ...
- remote debug
https://docs.microsoft.com/en-us/visualstudio/debugger/remote-debugging https://docs.microsoft.com/e ...
- mysql_udf_http(根据mysql表自动触发发送http请求)
下载 tar包wget http://mysql-udf-http.googlecode.com/files/mysql-udf-http-1.0.tar.gz解压tar -vzxf mysql-ud ...
- Qt-窗口部件概念介绍
前言:包括基础窗口部件QWidget.对话框QDialog.QFrame类族 .按钮部件.行编辑器.数值设定框以及滑块部件. 一.基础窗口部件QWidget 窗口部件(Widget)是Qt中建立用户界 ...
- CDR 2017压感笔和压感设备该怎么设置使用?
您可以通过CorelDRAW 2017 中的以下工具来运用压感笔.笔或其他设备的压力:艺术笔(表达模式).橡皮擦.涂抹.转动.吸引.排斥.粗糙和弄脏.此外,您还可以通过艺术笔(表达模式)工具.橡皮擦. ...
- Python中int，bool，str，格式化，少量is，已经for循环练习
1.整数 十进制转化为二进制 xxx.bit_length(). #求十进制数转化成二进制时所占用的位数 2.布尔值 bool # 布尔值 - - 用于条件使用 True 真 Fa ...