Vue中如何获取视频文件的第一帧截图？

当我们需要展示视频列表时，一般的需要手动通过video文件获取视频的截图生成thumb,那么如何生成视频的第一帧图片呢？我们可以使用canvas辅助获取。

shutThumb() {
        let size = 160
        // 获取video节点
        const video = document.getElementById("video");
        video.width = size
        video.height = size
        video.currentTime = 1 // 第一帧的时间
        //创建canvas对象
        const canvas = document.createElement("canvas")
        canvas.width = size
        canvas.height = size
        this.$nextTick(()=>{
          // 利用canvas对象方法绘图
          canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
          // 转换成base64形式
          const img = canvas.toDataURL("image/jpeg") // 这个就是图片的base64
          this.coverUrl = img
        })
      }

如上，通过指定video的当前时间，并通过canvas进行截图实现获取视频流的指定时间图片。