video 进行视频截图

1. vue参考代码

<div class="video-div" style="height: 785px; width: 1389px">
      <video id="videoMonitor" style="object-fit: cover" :src="videoUrl" crossorigin="anonymous" height="785" width="1389" autoplay ref="videoPlayer"></video>
    </div>

　　　<canvas :style="{ width: `1389px`, height: `785px`,display:'none' }" ref="lineCanvas"></canvas>

2.生成截图代码

// 照片截图
const screenshotFun = () => {
  let video = videoPlayer.value;//video组件
  let canvas = lineCanvas.value;//canvas组件
  let ctx = canvas.getContext('2d')
  ctx.drawImage(video, 0, 0, 1389, 785)
  var imgbase64 = canvas.toDataURL('image/png')
  if (imgbase64){
      const img = document.createElement("img");
        img.src = imgbase64;
        let loadImg = document.createElement("a");
        loadImg.href = img.src; // 底图base64
        loadImg.download = '截图.png';
        loadImg.click();
  }
}

注意事项：

如果你在进行截图的时候一直报canvas.toDataURL的错，那是因为canvas禁止截图，请在video上加上crossorigin="anonymous"属性，来允许跨域访问。