2021-03-03 16:07

用JavaScript语言-打开摄像头-拍摄图片-并且通过Ajax上传图片到服务器

码自答

WEB前端

(1016)

(0)

收藏

通过JavaScript语言,打开计算机的摄像头,实时预览摄像头画面,并且拍摄照片,通过Ajax上传到服务器

Ajax是通过JQuery框架实现的

<!DOCTYPE html>
<html>
<head>
    <title>万码学堂wanmait</title>
    <meta charset="utf-8">
    <meta name="author" content="万码学堂wanmait">
</head>
<body>

<input type="button" value="打开摄像头" onclick="openCamera()">
<input type="button" value="拍照" onclick="takePicture()">
<input type="button" value="关闭摄像头" onclick="closeCamera()">
<br>

<!-- 显示摄像头实时拍摄的画面 -->
<video id="myVideo" width="500px" height="500px" autoplay="autoplay"></video>

<!-- 显示摄像头拍照的照片 -->
<canvas id="myCanvas" width="500px" height="500px"></canvas>

<script type="text/javascript">
    
    //打开摄像头 
    function openCamera() {
        var param = {
            video: { width: 500, height: 500 },
            audio: false
        };
       //摄像头拍摄参数   audio:false  关闭mic

        var myVideo = document.getElementById('myVideo');     //获得网页上的myVideo组件  用来显示实时摄像头画面

        var myCamera= navigator.mediaDevices.getUserMedia(param);
        //获得摄像头

        myCamera.then((stream) => {
            myVideo.srcObject = stream;//myVideo组件显示的资源来自摄像头数据
            myVideo.play();//myVeid组件播放视频
        });
    }

    // 拍照
    function takePicture() {
        var myVideo = document.getElementById('myVideo');//获得myVideo组件
        var myCanvas = document.getElementById('myCanvas');//获得myCancas组件  显示拍摄的照片
        var graphics= myCanvas.getContext('2d');//graphics画笔  往canvas中间画图
        graphics.drawImage(myVideo, 0, 0, 500, 500);//myVideo组件当前的画面  画到myCanvas组件  成为图片

        var picture = document.getElementById('myCanvas').toDataURL('image/png');
        //从myCanvas组件中间 获得拍摄的照片   png是图片格式  

      //上传图片到服务器
  $.ajax({
	            url:""
        ,type:"post"
        ,data:{"picture":picture}
        ,success:function(mes){
        
      }
       });
       //上传Ajax结束   


    }//拍照方法结束

    // 关闭摄像头
    function closeCamera() {
          var stream = document.getElementById('myVideo').srcObject;//获得myVideo的资源
          var tracks = stream.getTracks();

          tracks.forEach(function(track) {
            track.stop();//关闭
          });

         document.getElementById('myVideo').srcObject = null;
         //清除myVideo中间的资源  myVideo中间不显示任何内容
    }
</script>
</body>


0条评论

点击登录参与评论