上传视频后前端本地生成视频封面的办法

代码用TS编写,思路：File=>videoElement=>Canvas=>URL

①把file转为videoElement

export const fileToVideoElement = (file: File) => new Promise<HTMLVideoElement>((resolve) => {
  const video = document.createElement('video');
  video.setAttribute('crossOrigin', 'Anonymous');
  video.addEventListener('loadeddata', () => {
    video.currentTime = 1;
  });
  video.addEventListener('seeked', () => {
    resolve(video);
    window.URL.revokeObjectURL(src);
  });
  const src = window.URL.createObjectURL(file);
  video.src = src;
});

②把videoElement转为Canvas

export const videoElementToCanvas = (videoElement: HTMLVideoElement) => {
  // 截图当前画面到 canvas 上
  const canvas = document.createElement('canvas');
  canvas.width = videoElement.videoWidth;
  canvas.height = videoElement.videoHeight;
  canvas.getContext('2d')!.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
  return canvas;
};

③生成本地URL（一串很长的字符串）

const poster = videoElementToCanvas(await fileToVideoElement(file)).toDataURL();