HTML5 调用摄像头并把画像输出与上传

最新推荐文章于 2023-05-09 18:03:18 发布

Mike铭

最新推荐文章于 2023-05-09 18:03:18 发布

阅读量1.1k

点赞数 4

分类专栏： HTML前端

本文链接：https://blog.csdn.net/weixin_45760685/article/details/103187235

版权

HTML前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5 调用摄像头并把画像输出

本文将介绍介绍把摄像头录取的画像输出到前端的两种方法。
另讲解如何在画像上加图案和把图像上传到后端。

HTML部分

显示画像部分，有两种方法分别是使用video和canvas控件

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<style>
   body{background-color: black;}
</style>
<body>
  <div align=center>
    <video style="" id="video" width="480" height="480" controls></video>
    <canvas style="background-color: black" id="canvas" width="480" height="480"></canvas>
  </div>
</body>
</html>

JS部分

包括调用用户摄像头和window.onload两部分
采用window.onload目的是页面加载的时候就开始打开摄像头
由于canvas是静态的所以我采用window.setInterval函数，令图片每10ms变化一次，以达到动态的效果。

<script type="text/javascript">
	function getUserMedia(constraints, success, error) {
	  if (navigator.mediaDevices.getUserMedia) {
	    navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
	  } else if (navigator.webkitGetUserMedia) {
	    navigator.webkitGetUserMedia(constraints,success, error)
	  } else if (navigator.mozGetUserMedia) {
	    navigator.mozGetUserMedia(constraints, success, error);
	  } else if (navigator.getUserMedia) {
	    navigator.getUserMedia(constraints, success, error);
	  }
	}
	function success(stream) {
	  let CompatibleURL = window.URL || window.webkitURL;
	  console.log(stream);
	  video.srcObject = stream;
	  video.play();
	}
	function error(error) {
	  console.log(`error${error.name}, ${error.message}`);
	  alert("error")
	}
	if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
	  getUserMedia({video : {width: 480, height: 480}}, success, error);
	} else {
	}
	
	let video = document.getElementById('video');
	let canvas = document.getElementById('canvas');
	let context = canvas.getContext('2d');
	let img;
	
	window.onload = function(){
	  var i = window.setInterval(function () {
	    //对video进行截图
	    context.drawImage(video, 0, 0, 480, 480);
	    //使用canvas画圈
	    context.beginPath();
	    context.globalAlpha=0.2;
	    context.fillStyle="white";
	    context.arc(240, 200,150,Math.PI*2,0,true);
	    context.closePath();
	    context.fill();
	  }, 10)//10ms
	}
</script>

输出结果如下（先忽略圈圈）：
左边是用video输出的画像，右边是用canvas
在这里插入图片描述

使用Canvas的好处

1.canvas很强大，对图像加工较为容易。如上图，我在canvas上画了个半透明的圆

使用Canvas的坏处

需要设置间断时间，时间太长图像会卡顿

Tips：因为canvas的图像是对video的截图，所以如果只使用canvas时候，只需把video隐藏即可；把video的controls去掉就可以去掉进度条；

  <video style="display:none;" id="video" width="480" height="480" controls>

上传图像到后端

获取canvas的图像并转为base64的格式。此处要把前22位没用的去掉。
base64的前22位是 “ data:image/png;base64, ”
然后把参数senddata上传即可

var canvasElement = document.getElementById('canvas');
var MIME_TYPE = "image/png"; 
var imgURL = canvasElement.toDataURL(MIME_TYPE).substring(22);
imgData = {uploadImg:imgURL};
var senddata = JSON.stringify(imgData);

Mike铭

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
HTML5 调用摄像头并把画像输出与上传

HTML5 调用摄像头并把画像输出html部分显示画像部分，我们分别使用video和canvas来对比<!DOCTYPE html><html><head> <title>Title</title></head><style> body{background-color: black;...
复制链接

扫一扫

专栏目录