如何使用Vue.js捕获视频当前帧或生成单张缩略图

修复后可直接运行的Vue2代码 #

<!DOCTYPE html>
<html>
<head>
  <title>视频截图功能</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
  <div id="app">
    <video id="video" controls="controls" width="600">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
    </video>
    <br>
    <button @click="capture">Play and Capture</button>
    <div>------------------Show captured thumbnail below -----------------</div>
    <img :src="snapshotUrl" v-if="snapshotUrl" alt="捕获的缩略图">
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data() {
        return {
          snapshotUrl: ''
        }
      },
      methods: {
        capture() {
          const videoCanvas = document.createElement('canvas');
          const video = document.getElementById('video');
          // 取视频实际播放尺寸，避免拉伸
          videoCanvas.height = video.videoHeight;
          videoCanvas.width = video.videoWidth;
          // 完整绘制当前视频帧
          videoCanvas.getContext('2d').drawImage(video, 0, 0, videoCanvas.width, videoCanvas.height);
          // 将截图base64地址赋值给响应式变量
          this.snapshotUrl = videoCanvas.toDataURL('image/png');
        }
      }
    });
  </script>
</body>
</html>

核心修改说明 #

• 新增响应式变量snapshotUrl存储截图的base64地址，直接和img标签的src属性绑定，遵循Vue数据驱动视图的设计逻辑，不需要手动操作DOM插入图片元素
• 修正canvas宽高取值逻辑，采用视频实际播放的videoWidth/videoHeight，避免截图拉伸变形
• 补全drawImage的参数，保证完整绘制视频当前帧，不会出现只截取局部画面的问题
• 新增v-if控制，只有存在截图时才展示img标签，避免页面出现空图片占位符

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