vue+canvas拍照

亲测有用

<template>
  <div id="app">
    <video id="video" autoplay></video>
    <canvas id='canvas' width='500' height='500' style="border:1px solid #ccc"></canvas>
    <button @click="aaaa">拍照</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      video:null,
    }
  },
  mounted(){
    this.video = document.getElementById("video");
    this.video.autoplay="autoplay";
    document.body.appendChild(this.video);
    navigator.mediaDevices.getUserMedia({
      audio: false, video: {facingMode: "user"}, //调用前置摄像头
      // { 'facingMode': "user" } //调用前置摄像头
      // video: { facingMode: { exact: "environment" } } //调用后置摄像头
    }).then((result) => {
      this.video.srcObject = result;
    })

  },
  methods:{
    aaaa(){
      //将捕获到的画面绘制到canvas上
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.drawImage(this.video,0,0,500,500);

      // // 生成一个img标签
      var new_img = document.createElement('img');
      //图片转为base64格式
      new_img.setAttribute('crossOrigin', 'anonymous');
      new_img.src = canvas.toDataURL("image/jpeg");
      console.log(new_img)
    }
  }
}
</script>