Vue.js进阶【0】 HTML5摄像头获取照片

Vue.js进阶文章列表

 

<video
  class="videoClass"
  style="width: 100%; height: 100%"
  id="video_id"
  autoplay="autoplay"
></video>
<canvas
   ref="myCanvas"
   id="canvas_id"
   class="canvas-vi"
   style="display: none"
></canvas>


mounted() {
    this.initCanvas();
  },


initCanvas() {
      //视频截图得到一个照片;
      this.canvas = this.$refs.myCanvas;
      this.ctx = this.canvas.getContext("2d");
      this.getMedia();
    },
    getMedia() {
      let constraints = {
        video: { width: 600, height: 600 },
        audio: true,
      };
      //获得video摄像头区域
      let video = document.getElementById("video_id");
      let promise = navigator.mediaDevices.getUserMedia(constraints);
      promise.then(function (MediaStream) {
        video.srcObject = MediaStream;
        video.play();
      });
    },


takePhoto() {//拍照
      //获得Canvas对象
      let video = document.getElementById("video_id");
      this.ctx = this.canvas.getContext("2d");
      this.ctx.drawImage(video, 0, 0, this.canvas.width, this.canvas.height);
    },


//获取base64图像数据
this.takePhoto();
let base64Data = this.canvas.toDataURL("image/jpeg", 1.0);
let data = { dataImage: base64Data };