Error in camera App / Type error: null on 'getContext'

Question

我有一个 b-modal 带有相机应用程序。

首先我将 <video> 和 canvas 分开 - 但现在我想让它们相互重叠。所以首先我想用我的按钮 make photo 显示我的 video - 如果我按下这个我的 canvas 和拍摄的照片和其他两个按钮 delete upload应该显示。

但我总是得到以下错误（我在错误所在的代码中做了评论）：

[Vue warn]：v-on 处理程序中的错误：“TypeError：无法读取 null 的属性（读取 'getContext'）”

我该如何处理？谢谢！

<template>
  <div :id="IDParent+'camera'">
    <div class="text-center" info>
      <div center :close="false">
        <p class="heading">Make photo</p>
      </div>
      <div>
        <video v-if="hide" class="mb-4" ref="video" id="video" width="100%" height="100%" autoplay />
        <canvas v-if="!hide" class="mb-4" id="responsive-canvas"></canvas>
        <div class="row mb-5">
          <div class="col-md-12">
            <b-button v-if="hide" variant="block p-3 colorSuccess" @click="takePicture()"><b-icon icon="camera-fill"></b-icon> Make Photo</b-button>
          </div>
          <div class="col-md-4">
            <b-button v-if="!hide" variant="block p-3 colorDanger mb-2" @click="deletePicture()"><b-icon icon="exclamation-circle-fill"></b-icon> Delete </b-button>
          </div>
          <div class="col-md-8">
            <b-button v-if="!hide" variant="block p-3 colorSuccess" @click="uploadPicture()"><b-icon icon="cloud-upload"></b-icon> upload photo</b-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      video: {},
      canvas: {},
      captures: [],
      push: false,
      hide: true,
    }
  },

  props: [
    "IDParent",
    ],

  mounted() {
    this.video = this.$refs.video;
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
             this.video.srcObject = stream;
                this.video.play();
                this.video.onplay = function () {
                };
                this.video.play();
        });
    }
    },

  methods: {

    closeModal() {
      
    },

    uploadPicture() {

    },

    takePicture() {
      if(this.hide == true) {
      const picture = document.querySelector("canvas"); //ERROR IN THIS LINE! 
      const ctx = picture.getContext("2d");
      ctx.imageSmoothingEnabled = true;
      ctx.imageSmoothingQuality = "high";
      ctx.drawImage(document.querySelector("video"), 0, 0, picture.width, picture.height);
      }
      this.hide = false;
    },

    showCanvas() {
        var canvas = document.getElementById('responsive-canvas');
        var heightRatio = 0.75;
        canvas.height = canvas.width * heightRatio;
    },

    deletePicture() {
      const inputPicture = document.querySelector("canvas");
      const context = inputPicture.getContext("2d");
      context.clearRect(0, 0, inputPicture.width, inputPicture.height);

      this.hide = true;
    },

    capture() {
        this.canvas = this.$refs.canvas;
        this.canvas.getContext("2d").drawImage(this.video, 0, 0, 640, 480);
        this.captures.push();
    },
  }
}

</script>

Answer 1

如果你仔细观察下面的函数，

 takePicture() {
      if(this.hide == true) {
      const picture = document.querySelector("canvas"); //ERROR IN THIS LINE! 
      const ctx = picture.getContext("2d");
      ctx.imageSmoothingEnabled = true;
      ctx.imageSmoothingQuality = "high";
      ctx.drawImage(document.querySelector("video"), 0, 0, picture.width, picture.height);
      }
      this.hide = false;
    },

点击下面的按钮会触发上面的内容

<b-button v-if="hide" variant="block p-3 colorSuccess" @click="takePicture()"><b-icon icon="camera-fill"></b-icon> Make Photo</b-button>

注意条件 v-if="hide"，此刻你 canvas 对 Dom 隐藏了，因为以下条件你用过

<canvas v-if="!hide" class="mb-4" id="responsive-canvas"></canvas>

这就是为什么当你试图查询它时，它显示错误的原因。

修改您的条件，使其在 DOM 上可用，然后尝试访问它

Error in camera App / Type error: null on 'getContext'

Error in camera App / Type error: null on 'getContext'

javascript

vue.js

vuejs2

camera