js截取视频第一帧

//首先设置好video元素
const video = document.createElement('video');// 创建video
  video.setAttribute('crossOrigin', 'anonymous'); // 处理跨域
  //src通过file拿
  src = URL.createObjectURL(file)
  video.setAttribute('src', src);// 给video添加属性
  video.setAttribute('width', '1920px');//设置宽高
  video.setAttribute('height', '1080px');
  video.setAttribute('preload', 'auto');// 当页面加载后载入整个音频
  //第一帧事件
  video.onloadeddata = async function () { // 当前帧数据加载完成，下一帧数据未记载事件
  //绘制canvas保存图片
    const canvas = document.createElement('canvas'),
      width = video.width, // canvas的尺寸和图片一样
      height = video.height;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d')
    ctx.drawImage(video, 0, 0, width, height); // 绘制canvas
    const dataURL = canvas.toDataURL('image/jpeg'); // 转换为base64
    const blob = dataURLtoFile(dataURL, '132.jpg')//base64转blob，名字自定义
    //上传图片到服务器
    let formData = new FormData();
    formData.append('ava', blob);
    axios.post(url,formData)

  };
  const dataURLtoFile = (dataUrl: any, filename: any) => {
  const arr = dataUrl.split(',');// 截取base64数据
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);// 转码
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
}