vue pc端调用摄像头进行拍照并实现裁剪上传

参考文档：MediaDevices.getUserMedia() - Web API 接口参考 | MDN

vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式 - 会写代码的赖先生 - 博客园

 使用vue-cropper裁剪图片

参考文档：Vue使用vue-cropper裁剪图片_hql1024的博客-CSDN博客

史上最全基于vue的图片裁剪vue-cropper使用_DT辰白-CSDN博客_vue-cropper

<template>
  <div>
    <!--开启摄像头-->
    <img @click="callCamera" :src="headImgSrc" alt="摄像头" />
    <!--canvas截取流-->
    <canvas ref="canvas" width="640" height="480"></canvas>
    <!--图片展示-->
    <video ref="video" width="640" height="480" autoplay></video>
    <!--确认-->
    <el-button size="mini" type="primary" @click="photograph"></el-button>
  </div>
</template>   
<script>
export default {
  data() {
    return {
      headImgSrc: require("@/assets/image/photograph.png"),
    };
  },
  methods: {
    // 调用摄像头
    callCamera() {
      // H5调用电脑摄像头API
      //navigator.mediaDevices.getUserMedia 调用后 会提示用户给予使用媒体输入的许可.返回一个 Promise 对象，
      //成功后会resolve回调一个 MediaStream 对象。
      //在移动设备上面调用摄像头也可以通过此种方式，如下的例子表示优先使用前置摄像头
      //{ 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: true, //说明请求的媒体类型。调用视频
        })
        .then((success) => {
          // 摄像头开启成功
          this.$refs["video"].srcObject = success; //src 是播多媒体文件的；srcobj 是实时流
          // 实时拍照效果
          this.$refs["video"].play();
        })
        .catch((error) => {
          //用户拒绝
          console.error("摄像头开启失败，请检查摄像头是否可用！");
        });
    },
    // 拍照
    photograph() {
      let ctx = this.$refs["canvas"].getContext("2d");
      // 把当前视频帧内容渲染到canvas上
      ctx.drawImage(this.$refs["video"], 0, 0, 640, 480);
      //canvas图片 转base64格式、图片格式转换、图片质量压缩
      //语法 canvas.toDataURL(type, encoderOptions); 设置转换的图片格式、图片质量压缩
      let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); 
      let str = imgBase64.replace("data:image/jpeg;base64,", "");
      let strLength = str.length;
      let fileLength = parseInt(strLength - (strLength / 8) * 2); //
      let size = (fileLength / 1024).toFixed(2);// 由字节转换为KB 判断大小 
      console.log(size); //图片大小
    },
    // 关闭摄像头
    closeCamera() {
      if (!this.$refs["video"].srcObject) {
        return;
      }
      //MediaStream 接口的getTracks() 方法会返回一个包含媒体流中所有媒体对象
      let stream = this.$refs["video"].srcObject;
      let tracks = stream.getTracks();
      tracks.forEach((track) => {
        track.stop();
      });
      this.$refs["video"].srcObject = null;
    },
  },
};
</script>