vue項目中實現拍照功能

vue文件中

<!--開啟攝像頭的彈窗-->
<div class="info2" @click="onTake">
  <el-image :src="url" style="width: 100%; height: 100%"></el-image>
</div>

<!--開啟攝像頭的拍照和-->
<el-dialog title="拍照上傳" :visible.sync="visible" @close="onCancel1" width="1065px">
  <div class="box">
    <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
    <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas>
  </div>
  <div slot="footer">
    <el-button @click="drawImage" icon="el-icon-camera" size="small">
      拍照
    </el-button>
    <el-button v-if="os" @click="getCompetence" icon="el-icon-video-camera" size="small">
      打開攝像頭
    </el-button>
    <el-button v-else @click="stopNavigator" icon="el-icon-switch-button" size="small">
      關閉攝像頭
    </el-button>
    <el-button @click="resetCanvas" icon="el-icon-refresh" size="small">
      重置
    </el-button>
    <el-button @click="onCancel" icon="el-icon-circle-close" size="small">
      完成
    </el-button>
  </div>
</el-dialog>

js

//對參數進行設置
data() {
  return {
    url:"",// 上傳的圖片的地址
    visible: false, //彈窗
    videoWidth: 500,// 繪畫布的寬高
    videoHeight: 400,
    os: false, //控制攝像頭開關
    thisCancas: null,
    thisContext: null,
    thisVideo: null,
    imgSrc: undefined,
    imgFile: null,
  }
}
/*調用攝像頭拍照開始*/
onTake() {
  this.visible = true;
  this.getCompetence();
},

/*關閉彈窗，以及關閉攝像頭功能*/
onCancel1() {
  this.visible = false;
  this.stopNavigator(); // 關閉攝像頭
},

// 調用攝像頭權限
getCompetence() {
  //必須在model中render后才可獲取到dom節點,直接獲取無法獲取到model中的dom節點
  this.$nextTick(() => {
    const _this = this;
    this.os = false; //切換成關閉攝像頭
    // 獲取畫布節點
    this.thisCancas = document.getElementById("canvasCamera");
    // 為畫布指定繪畫為2d類型
    this.thisContext = this.thisCancas.getContext("2d");
    //獲取video節點
    this.thisVideo = document.getElementById("videoCamera");
    // 舊版本瀏覽器可能根本不支持mediaDevices，我們首先設置一個空對象
    if (navigator.mediaDevices === undefined) {
      navigator.menavigatordiaDevices = {};
    }
    // 一些瀏覽器實現了部分mediaDevices，我們不能只分配一個對象
    // 使用getUserMedia，因為它會覆蓋現有的屬性。
    // 這里，如果缺少getUserMedia屬性，就添加它。
    if (navigator.mediaDevices.getUserMedia === undefined) {
      navigator.mediaDevices.getUserMedia = function(constraints) {
        // 首先獲取現存的getUserMedia(如果存在)
        let getUserMedia =
          navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia ||
          navigator.getUserMedia;
        // 有些瀏覽器不支持，會返回錯誤信息
        // 保持接口一致
        if (!getUserMedia) {
          return Promise.reject(
            new Error("getUserMedia is not implemented in this browser")
          );
        }
        // 否則，使用Promise將調用包裝到舊的navigator.getUserMedia
        return new Promise(function(resolve, reject) {
          getUserMedia.call(navigator, constraints, resolve, reject);
        });
      };
    }
    const constraints = {
      audio: false,
      video: {
        width: _this.videoWidth,
        height: _this.videoHeight,
        transform: "scaleX(-1)"
      }
    };
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function(stream) {
        // 舊的瀏覽器可能沒有srcObject
        if ("srcObject" in _this.thisVideo) {
          _this.thisVideo.srcObject = stream;
        } else {
          // 避免在新的瀏覽器中使用它，因為它正在被棄用。
          _this.thisVideo.src = window.URL.createObjectURL(stream);
        }
        _this.thisVideo.onloadedmetadata = function(e) {
          _this.thisVideo.play();
        };
      })
      .catch(err => {
        this.$notify({
          title: "警告",
          message: "沒有開啟攝像頭權限或瀏覽器版本不兼容.",
          type: "warning"
        });
      });
  });
},

//調用攝像頭 --- 進行繪制圖片
drawImage() {
  // 點擊，canvas畫圖
  this.thisContext.drawImage(
    this.thisVideo,
    0,
    0,
    this.videoWidth,
    this.videoHeight
  );
  // 獲取圖片base64鏈接
  this.imgSrc = this.thisCancas.toDataURL("image/png");

  /*const imgSrc=this.imgSrc;*/
},
//清空畫布
clearCanvas(id) {
  let c = document.getElementById(id);
  let cxt = c.getContext("2d");
  cxt.clearRect(0, 0, c.width, c.height);
},

//重置畫布
resetCanvas() {
  // this.imgSrc = "";
  this.clearCanvas("canvasCamera");
},

//關閉攝像頭
stopNavigator() {
  if (this.thisVideo && this.thisVideo !== null) {
    this.thisVideo.srcObject.getTracks()[0].stop();
    this.os = true; //切換成打開攝像頭
  }
}
/*調用攝像頭拍照結束*/

/*完成拍照並對其照片進行上傳*/
onCancel() {
  this.visible = false;
  /* this.resetCanvas();*/
  // console.log(this.imgSrc);
  this.imgFile = this.dataURLtoFile(this.imgSrc, new Date() + ".png");
  console.log(this.imgFile);
  this.stopNavigator();
  // let par = {
  //   photo: this.imgFile,
  // };
  let data = new FormData();
  data.append("photo", this.imgFile); //1是圖片，2是視頻
  // data.append("code", this.addForm.code);
  console.log(data);
  // checkbeforepersonalphoto上傳圖片的接口
  checkbeforepersonalphoto(data).then(res => {
    if (res.code == "1") {
      this.$message({
        message: "上傳成功",
        type: "success"
      });
      this.url = res.data;
    }
  });
},

dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(",");
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  var u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
},

css

.info2 {
  width: 10%;
  height: 100px;
}
.box {
  display:flex;
}