zoukankan      html  css  js  c++  java
  • js vue 在页面中将摄像头放在一个标签里展示,(模仿手机拍照功能)

    1.HTML

    <video id="video" autoplay class="fileImg"></video>   
    <canvas id="canvas" width="640" height="480"></canvas>
     <div class="submitButton buttonData" @click="uploadImg">上传图片</div>
     

    2.JS

    <script>
        let aVideo = document.getElementById('video');
          let aCanvas = document.getElementById('canvas');
          let ctx = aCanvas.getContext('2d');
    
          navigator.getUserMedia = navigator.getUserMedia ||
              navigator.webkitGetUserMedia ||
              navigator.mozGetUserMedia ||
              navigator.msGetUserMedia; //获取媒体对象(这里指摄像头)
          navigator.getUserMedia({
              video: true
          }, gotStream, noStream); //参数1获取用户打开权限;参数二成功打开后调用,并传一个视频流对象,参数三打开失败后调用,传错误信息 
    
    
    function gotStream(stream) {
        video.src = URL.createObjectURL(stream);
        video.onerror = function() {
            stream.stop();
        };
        stream.onended = noStream;
        video.onloadedmetadata = function() {
            // alert('摄像头成功打开!');
        };
    }
    
    function noStream(err) {
        // alert(err);
    }
    
    function uploadImg(){
         ctx.drawImage(aVideo, 0, 0, 640, 480);
         alert(aCanvas.toDataURL('image/png'))     // 得到base64,需要后台将base64转换并上传到服务器,返回线上http路径
          const res = await fileUpload({imgStr: aCanvas.toDataURL('image/png')})   // 调取后台接口
    
          if (res.data.code == 0){
            this.headImage = res.data.data.string  //得到后台返回路径
            
          }
    }
    </script>
  • 相关阅读:
    每日总结
    每日总结
    每日总结
    每日总结
    每日总结
    每日总结
    每日总结
    实现微信小程序和支付宝小程序二维码合并
    Solr教程:1.下载和安装
    如何生成漫画风图片无需下载APP无需PS无需电脑
  • 原文地址:https://www.cnblogs.com/gqx-html/p/9965137.html
Copyright © 2011-2022 走看看