PC端获取摄像头图片并上传的实现
说明：（1）在页面上显示摄像头录像。
（2）将摄像头的某个帧截屏到img里（实际是base64的图像编码）
（3）调用jquery上传图片（非文件上传的模式）
（4）使用Spring MVC 解析并保存图片。
这个功能主要参考了下面两个链接（一个是截屏，一个是上传）：
下面是html代码（注意需要将页面放在tomcat里运行，直接在系统里打开是不行的）
https://www.cnblogs.com/jiangcheng-langzi/p/8391497.html
https://www.cnblogs.com/MrSong97/p/9523666.html
<html>
<head>
<head>
<title> 打开摄像头并截取照片须本地tomcat下运行</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript">
//将dataUrl转换为blob准备上传
function b64toBlob(b64Data, contentType='', sliceSize=512) {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, {type: contentType});
return blob;
}
window.onload = function () {
var canvas = document.getElementsByTagName('canvas')[0],
context = canvas.getContext('2d'),
video = document.getElementsByTagName("video")[0],
snap = document.getElementById("snap"),
close = document.getElementById("close"),
start = document.getElementById("start"),
MediaStreamTrack;
start.addEventListener('click', function () {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(function (stream) {
console.log(stream);
MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
video.src=(window.URL).createObjectURL(stream);
video.play();
}).catch(function(err){
console.log(err);
});
}else if(navigator.getMedia){
navigator.getMedia({
video: true
}).then(function (stream) {
console.log(stream);
MediaStreamTrack=stream.getTracks()[1];
video.src=(window.webkitURL).createObjectURL(stream);
video.play();
}).catch(function(err){
console.log(err);
});
}
});
snap.addEventListener('click', function () {
context.drawImage(video, 0, 0,200,150);
//console.log(canvas.toDataURL()); //也可以指定图像格式： var strDataURI = oCanvas.toDataURL("image/jpeg"); 得到是base64图像流
//将图像显示到img元素:
//下面将图片显示到图像组件
var dataurl = canvas.toDataURL("image/jpeg");
document.getElementById("demo").src= dataurl;//
});
close.addEventListener('click', function () {
MediaStreamTrack && MediaStreamTrack.stop();
});
}
function upload()
{
var ImageURL = document.getElementById("demo").src;
//var ImageURL2 = document.getElementById("demo2").src;
var block = ImageURL.split(";");
// Get the content type of the image
const contentType = block[0].split(":")[1];// In this case "image/jpeg"
// get the real base64 content of the file
const realData = block[1].split(",")[1];//
// Convert it to a blob to upload
var blob = b64toBlob(realData, contentType);
// new a formData
const formData = new FormData();
formData.append('blob',blob);
//formData.append('blob1', blob);//模拟在增加第二个，一次传2张
// upload
$.ajax({
url:"/portal/rest/ucenterapi/testuploadvideo",
data: formData,
type:"POST",
contentType:false,
processData:false,
error:function(err){
},
success:function(data){
alert('hi');
}
});
}
</script>
</head>
<body>
<video width="200px" height="150px"></video>
<canvas width="200px" height="150px"></canvas>
<p>
<button id="start">打开摄像头</button>
<button id="snap">截取身份证正面</button>
<!--<button id="snap2">截取身份证背面</button>-->
<button id="close">关闭摄像头</button>
<button id="uploadFile" οnclick="upload()">上传身份证</button>
</p>
<p>
<img id="demo" src=""/>
<img id="demo2" src=""/>
</body>
</html>
下面是spring MVC接口代码：
@RequestMapping(value="/testuploadvideo",method={RequestMethod.POST,RequestMethod.GET}) //,RequestMethod.GET
public @ResponseBody Object testuploadvideo
(
HttpServletRequest request, HttpServletResponse response) throws Exception
{
logger.info("调用视频截图::::");
//https://blog.****.net/niuch1029291561/article/details/17377903
// 图片新名字
HashMap<String,Object> map = new HashMap();
//遍历头部检查accessToken
Enumeration<?> enum1 = request.getHeaderNames();
//检查头部信息
while (enum1.hasMoreElements())
{
String key = (String) enum1.nextElement();
String value = request.getHeader(key);
System.out.println(key + "\t" + value);
}
//遍历传入参数
Enumeration em = request.getParameterNames();
while (em.hasMoreElements())
{
String name1 = (String) em.nextElement();
String value = request.getParameter(name1);
logger.info(name1+"/"+value);
}
//logger.info("上传身份证照照片");
//应该检查access_token如果access_token超时则不允许上传，防止传入过多的垃圾图片。
CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(
request.getSession().getServletContext());
//检查form中是否有enctype="multipart/form-data"
if(multipartResolver.isMultipart(request))
{
//将request变成多部分request
MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;
//获取multiRequest 中所有的文件名
Iterator iter=multiRequest.getFileNames();
int i=0;
while(iter.hasNext()) //暂时先处理一个
{
i++;
logger.info("第"+String.valueOf(i)+"个文件！");
//一次遍历所有文件
MultipartFile picFile=multiRequest.getFile(iter.next().toString());
if(picFile!=null)
{
//String path="E:/springUpload"+file.getOriginalFilename();
//上传
// file.transferTo(new File(path));
String name = StringUtil.getUUID();
String oldName = "aaaaaaa.jpg";//picFile.getOriginalFilename();
String dt = StringUtil.getCurrentDateTime();
String fullPath = request.getRealPath("/")+"upload/"+dt.substring(0,4)+"/"+dt.substring(5,7)+"/"+dt.substring(8,10)+"/";
File file = new File(fullPath);
if(!fullPath.endsWith("/"))fullPath+="/";
file.mkdirs();
// 后缀名
String exeName = oldName.substring(oldName.lastIndexOf("."));
File pic = new File(fullPath + name + exeName);
logger.info("上传文件地址：");
logger.info(fullPath + name + exeName);
String path1 = "/portal"+"/upload/"+dt.substring(0,4)+"/"+dt.substring(5,7)+"/"+dt.substring(8,10)+"/"+name + exeName;
logger.info(path1);
// 保存图片到本地磁盘
picFile.transferTo(pic);
//Map map = new HashMap();
map.put("url", path1);
map.put("rowId", name);
map.put("code", 0);
map.put("msg", "上传头像成功!");
return map;
}
}
}
return map;
}
下面是页面效果：