前端JS实现视频截图并下载

最基本的实现思路就是把视频画在canvas上，然后使用toDataURL导出Base64格式，赋给image的src进行图片预览，点击下载把Base64放到a标签的href属性中并模拟点击进行下载

<video src="1.mp4" id="video" controls width="300"></video>
<img src="" alt="" id="image" width="300">
<button id="shot">截屏</button>
<button id="download">下载</button>

一个视频播放器，一个预览图片区域，一个截屏按钮，一个下载按钮

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const video = document.querySelector('#video');
const image = document.querySelector('#image');
const shot = document.querySelector('#shot');
const download = document.querySelector('#download');
let url = '';

创建一个canvas，并获取页面中dom的引用

video.addEventListener('loadedmetadata', function (e) {
  canvas.width = this.videoWidth;
  canvas.height = this.videoHeight;
});

当视频加载完成之后设置canvas的宽高

shot.addEventListener('click', function () {
  ctx.drawImage(video, 0, 0);
  url = canvas.toDataURL('image/jpg');
  image.src = url;
});

点击截屏按钮，将视频画在canvas上，然后取dataURL，赋给image的src

download.addEventListener('click', function () {
  const a = document.createElement('a');
  const event = new MouseEvent('click');
  a.download = 'screen_shot';
  a.href = url;
  a.dispatchEvent(event);
});

最后创建一个a标签，把刚才取到的url赋给href，创建一个点击事件并模拟点击事件进行下载

下载成功