前端js实现从视频中提取图片帧

使用canvas进行视频截图。

<div class="dashboard-container">
    <div style="display: flex">
      <el-input v-model="videoUrl" placeholder="请输入视频地址">el-input>
      <el-button @click="captureVideo(3)" type="success">截取el-button>
      <el-button @click="clearImg()" type="warning">清空图片el-button>
    div>
    <div style="display: flex;flex-wrap: wrap;margin-top: 10px">
      <video :src="videoUrl" id="video" controls="controls" crossorigin="anonymous" playsinline autoplay muted loop>video>
	  <img class="img" v-for="(item) in imgList" :src="item"/>
    div>
div>

captureVideo(w) {
    if(this.videoUrl == ''){
      this.$message.warning("请先输入视频地址");
      return;
     }
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      let img = document.createElement("img");
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  	if(w == 1) return;
	  this.imgList.push(canvas.toDataURL('image/png'));
  },
  clearImg(){
    this.$confirm('确认清空已截图片?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.imgList = [];
      this.$message({
        type: 'success',
        message: '已清空!'
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已删除'
      });
    });
  }

#video{
	width: 300px;
}
.img{
	width: 300px;
   margin-left: 10px;
}

测试地址
http://jdhnv787.xyz/JYeontu/#/getCover