PC端获取摄像头图片并上传的实现

最新推荐文章于 2022-11-09 15:33:49 发布

置顶 baozhengw

最新推荐文章于 2022-11-09 15:33:49 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/baozhengw/article/details/104534398

版权

说明：（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;
}

});

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="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.csdn.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);