VUE获取视频某一帧的封面图

html部分
 

<div style="display: none">
        <video
          ref="submissionVideo"
          :src="videoUrl"
          style="width: 200px; height: 268px"
          crossorigin="anonymous"
          @loadedmetadata="getDuration"
          @loadeddata="captureFirstFrame"
          v-if="videoUrl"
        ></video>
      </div>
      <canvas ref="submissionCanvas" style="display: none"></canvas>

JS部分

 // 获取视频封面
    getVideoCover() {
      // 防止生成重复
      if (this.setVideoCoverLoading) return false;
      this.$nextTick(() => {
        const video = this.$refs.submissionVideo; // 获取视频 dom
        const canvas = this.$refs.submissionCanvas; // 获取canvas dom
        const context = canvas.getContext('2d');
        if (!video.readyState) {
          console.error('视频尚未加载完成，无法捕获封面');
          return;
        }
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        video.currentTime = this.currentTime; // 获取指定时间点的封面
        this.setVideoCoverLoading = true;
        // 监听视频播放时间，获取封面
        video.addEventListener(
          'seeked',
          () => {
            context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
            const coverImageDataUrl = canvas.toDataURL('image/png');
            let blob = dataURLtoBlob(coverImageDataUrl);
            let newName = `cover-1.png`;
            let newFile = blobToFile(blob, newName);
            // 调用后端上传接口
            upload(newFile, 0, `cover-1.png`, url => {
              this.submitVideoFrom.cover_url = url;
            });
            setTimeout(() => {
              this.setVideoCoverLoading = false;
            }, 300);
            // 将base64转换为blob
            function dataURLtoBlob(dataurl) {
              let arr = dataurl.split(',');
              let mime = arr[0].match(/:(.*?);/)[1];
              let bstr = window.atob(arr[1]);
              let n = bstr.length;
              let u8arr = new Uint8Array(n);
              while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
              }
              return new Blob([u8arr], { type: mime });
            }
            // 将blob转换为file
            function blobToFile(theBlob, fileName) {
              theBlob.lastModifiedDate = new Date();
              theBlob.name = fileName;
              return theBlob;
            }
          },
          { once: true },
        );
      });
    },