vue截取视频第一帧作为封面（缩略图）

1.canvas展示

<template>
  <div>
    <video ref="videoR" src="../assets/video/cat.mp4" style="width:200px;height:300px;"></video>
    <div>
      <canvas ref="canvasR" style="width:200px;height:300px;"></canvas>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      imageName:null, 
    }
  },
  mounted() {
    this.handleVideo()
  },
  methods: {
    handleVideo() {
      let that = this
      const video = this.$refs.videoR
      const canvas = this.$refs.canvasR
      video.addEventListener('click', () => {
        // 点击视频生成缩略图（事件根据自身情况定义）
        canvas.width = video.videoWidth
        canvas.height = video.videoHeight
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
      })
    }
  }
}

</script>

2.image展示

//html
<img :src="imageName">
-------------------------------------------------------------
//js
const dataURL = canvas.toDataURL('image/jpeg')
that.imageName = dataURL