Vue b-modal相机应用调用getContext报null类型错误如何解决

错误根因 #

你触发报错的原因非常明确：初始状态下hide = true，你给<canvas>标签用了v-if="!hide"的指令，v-if在判断条件不成立时会直接把元素从DOM树中销毁，此时你在takePicture方法里先执行document.querySelector("canvas")根本找不到对应元素，拿到的返回值是null，调用null.getContext()自然就触发了类型错误。同时你把this.hide = false的状态切换写在了canvas操作之后，即使修改了状态，Vue的DOM更新是异步执行的，同步执行DOM查询也拿不到刚生成的canvas元素。

解决方案 #

按照以下步骤修改即可解决问题，同时满足你需要的video和canvas重叠显示的需求：

1. 修改template模板 #

• 给video和canvas新增相对定位的外层容器，实现二者重叠显示
• 把v-if替换成v-show，仅控制元素显隐不销毁DOM
• 给canvas增加ref属性，用Vue原生方式访问元素，避免原生DOM查询冲突

<template>
  <div :id="IDParent+'camera'">
    <div class="text-center" info>
      <div center :close="false">
        <p class="heading">Make photo</p>
      </div>
      <!-- 重叠容器 -->
      <div style="position: relative; width: 100%;" class="mb-4">
        <video v-show="hide" ref="video" id="video" autoplay style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;" />
        <canvas v-show="!hide" ref="canvas" id="responsive-canvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>
        <!-- 占位块避免父容器高度塌陷 -->
        <div style="width: 100%; padding-top: 75%;"></div>
      </div>
      <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>
</template>

2. 修改takePicture方法 #

调整逻辑顺序，先绘制canvas再切换显隐状态，直接用$refs访问元素：

takePicture() {
  const picture = this.$refs.canvas;
  // 先设置canvas宽高再绘图
  this.showCanvas();
  const ctx = picture.getContext("2d");
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = "high";
  ctx.drawImage(this.$refs.video, 0, 0, picture.width, picture.height);
  // 绘制完成后再切换显隐
  this.hide = false;
}

3. 同步修改其他方法的DOM访问逻辑 #

把剩余的原生DOM查询全部替换为$refs访问，避免后续同类问题：

showCanvas() {
  var canvas = this.$refs.canvas;
  var heightRatio = 0.75;
  canvas.height = canvas.width * heightRatio;
},

deletePicture() {
  const inputPicture = this.$refs.canvas;
  const context = inputPicture.getContext("2d");
  context.clearRect(0, 0, inputPicture.width, inputPicture.height);
  this.hide = true;
}

额外优化建议 #

• 如果你的b-modal默认是隐藏状态，建议把打开摄像头的逻辑从mounted钩子移到modal打开的回调事件中，避免页面刚加载就请求摄像头权限，同时防止modal未渲染时$refs.video不存在的问题。
• 给getUserMedia调用增加错误捕获逻辑，处理用户拒绝摄像头权限的场景。

内容的提问来源于stack exchange，提问作者patrick96