vue拍照功能PC+手机需要的可以看一下

项目中需要用到拍照上传头像，从相册中选择，

相册中选择代码一搜一大堆就不讲了，今天主要讲一下在pc与手机上拉起摄像头拍照的功能

我们用到的是2.X的框架，用到了<canvas>和<video>

来讲一下，样式的代码我就不放上来了，主要还是看功能

1.首先是html界面

    <!--开启摄像头-->
    <el-button size="mini"   @click="openPhoto" >摄像头</el-button>
    <!--canvas截取流-->
    <canvas ref="canvas" width="500" height="500"></canvas>
    <!--图片展示-->
    <video ref="video" width="500" height="500" autoplay></video>
    <!--确认-->
    <el-button size="mini"  @click="photograph">拍照</el-button>

2.vue的data中我并没有写任何东西，不过需要的话可以定义一个来接受拍照后的值

3.methods的方法

    // 打开摄像头
    openPhoto() {
      // H5调用电脑摄像头API
      //navigator.mediaDevices.getUserMedia 调用后 会提示用户给予使用媒体输入的许可.返回一个 Promise 对象，
      //成功后会resolve回调一个 MediaStream 对象。
      //在H5设备上面调用摄像头也可以通过此种方式，如下的例子表示优先使用前置摄像头
      //{ audio: true, video: { facingMode: "user" } }前摄像头
      //{ audio: true, video: { facingMode: { exact: "environment" } } }强制使用后置摄像头
      //设置获取接近 1280x720 的相机分辨率
      //{ audio: true, video: { width: 1280, height: 720 } };
      navigator.mediaDevices
          .getUserMedia({
            audio: true, video: { width: 1280, height: 720 }
          })
          .then((success) => {
            // 摄像头开启成功
            this.$refs["video"].srcObject = success; //srcObject 是实时流
            // 实时拍照效果
            this.$refs["video"].play();
          })
          .catch((error) => {
            //摄像头开启失败
            console.error("摄像头开启失败");
          });
    },
    // 拍照
    photograph() {
      let photoInfo= this.$refs["canvas"].getContext("2d");
      // 把当前内容渲染到canvas上
      photoInfo.drawImage(this.$refs["video"], 0, 0, 640, 480);
      //canvas图片 转base64格式、图片格式转换、图片质量压缩
      let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7);
      let string = imgBase64.replace("data:image/jpeg;base64,", "");
      let strLgh = string.length;
      let fileLgh = parseInt(strLgh - (strLgh  / 8) * 2); //
      let size = (fileLgh / 1024).toFixed(2);// 由字节转换为KB 判断大小
      console.log(size); //图片大小
    },

实现以后的功能

所有代码大概就是这样，欢迎补充，如果对您有帮助麻烦点个赞吧谢谢