获取视频的第一帧

<video :src="videoSrc" @loadeddata="loadeddata" style="display:none;">
      fuck video 第一帧
    </video>

<input
          type="file"
          id="chooseMovie"
          accept="video/*"
          class="inputfile"
          @change="handleMovieChange"
        >
        <label for="chooseMovie">
          <div class="default-vcr" v-show="!movieArr.length"></div>
        </label>

    handleMovieChange (e) {
      let files = e.target.files || e.dataTransfer.files
      if (files.length) this.setMovieSourceImg(files[0])
      let fmData = new FormData()
      fmData.append('file', files[0])
      fmData.append('path_name', 'healthRecords/video')
      uploadFiles(fmData).then((res) => {
        if (res.code === 200) {
          this.bigFormData.append(`video_list[${this.videoIndex}][tar_url]`, res.data.url)
        } else {
          myToast('视频上传失败')
        }
      })
    },
    setMovieSourceImg (file) {
      let that = this
      let fr = new FileReader()
      fr.onload = function (e) {
        that.videoSrc = fr.result
      }
      fr.readAsDataURL(file)
    },

    dataURItoBlob (dataURI) {
      var byteString = atob(dataURI.split(',')[1])
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
      var ab = new ArrayBuffer(byteString.length)
      var ia = new Uint8Array(ab)
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i)
      }
      return new Blob([ab], {type: mimeString})
    },
    loadeddata (e) {
      let scale = 0.8
      let video = e.path[0]
      var canvas = document.createElement('canvas')// canvas画布
      canvas.width = video.videoWidth * scale
      canvas.height = video.videoHeight * scale
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)// 画图
      // video.setAttribute('poster', canvas.toDataURL('image/png', 1))// 关键一步 —— 设置标签的 poster 属性的值为 base64 编译过后的canvas绘图。
      let img = canvas.toDataURL('image/png', 1)
      this.movieArr.push(img)

      let fmData = new FormData()
      fmData.append('file', this.dataURItoBlob(img), 'base64.jpeg')
      fmData.append('path_name', 'tmp')
      uploadImages(fmData).then((res) => {
        if (res.code === 200) {
          this.bigFormData.append(`video_list[${this.videoIndex}][cover_url]`, res.data.url)
          this.videoIndex = this.videoIndex + 1
        } else {
          myToast('封面图上传失败')
        }
      })
    },

---

这是获取视频第一帧的几段核心代码，思路

• 获取本地视频的base64文件，然后赋值给video标签
• video标签设置为display：none;
• loadeddata 核心方法，监听视频第一帧加载完成
• 跑下面的canvas代码，然后就能生成一张图片，完美

很遗憾的是这段代码费经心血的代码现在在我的项目中用不到了，记得一年前差不多这个时候，自己也想实现这个功能，但是完全是懵的，现在至少能实现了，很开心，看到了自己的进步。

慢慢的发现canvas能实现很多功能，并且很多功能好像只能使用canvas来实现，svg和canvas差不多，但是后者难的很多，明年这些东西都要好好研究下。

删掉自己辛辛苦苦写的代码，有点痛苦啊