vue3 获取视频第一帧/base64转为blob/blob转为file

img标签使用第一帧方法

:poster="url+'?x-oss-process=video/snapshot,t_1,m_fast'"

获取视频第一帧

//  使用示例
getVideoposter(url, 512, 300)
       .then((base64Data) => {
              let blob = dataURLtoBlob(base64Data);
              let newName = `${file.name.split(".")[file.name.split(".").length - 2]
                }.png`;
              let newFile = blobToFile(blob, newName);
              // 通过上传方法上传至服务器获取返回的URL
              uploadImg(newFile).then((imageUrl) => {
                // you have  an imgUrl！ do sth now！
              });
            })
            .catch((e) => {
              console.log("e:", e);
            })
            .finally(() => {});
        } 

// 获取视频封帧数封面base64
/**  
  因为视频中有手机中横屏视频也有竖屏视频  本方法内含视频中间区域截屏
  而非全部截屏 所以有些关于长宽的判断 
  注注注：还有一点需要注明的 也是费了我不少时间才大约弄明白 浏览器好像对base64截图有大小的限制  
  刚开始写的时候没有限制大小取全屏的截图 结果cavas绘制的图 总是上面一部分 
  下面并未绘制  这时候有两个方案 一是降低清晰度 第二是修改浏览器对这个的默认大小
  具体方法百度 总之希望大家不要像我这样自查cavans方法 耽误太多时间 这不是我们的问题
*/
const getVideoposter = async (url, w, h) => {
  return new Promise((resolve, reject) => {
    let imgbase64 = null;
    let video = document.createElement("video");
    video.setAttribute("crossOrigin", "Anonymous");
    video.setAttribute("src", url);
    video.setAttribute("preload", "auto"); // 不设置该项就不会开启预先加载视频，那么拿到的会是黑屏
    //如果不设置currentTime，画出来的图片是空的 当前为截取第0.001秒
    video.currentTime = 0.001;
    // video.onloadeddata = loadedmetadata;
    video.addEventListener("loadeddata", function () {
      let canvas = document.createElement("canvas");
      let vWidth = video.videoWidth;
      let vHeight = video.videoHeight;
      let whScale = vWidth / vHeight;
      let widthBg = 512;
      let heightBg;
      let splitHeight = 0;
      if (vWidth < vHeight) {
        console.log("上下长图片");
        heightBg = 300;
        // heightBg = vHeight * 512 / vWidth;
        splitHeight = vHeight / 2 - 150;
        console.log("splitHeight:", splitHeight);
      } else {
        console.log("左右宽图片");
        heightBg = vHeight;
        // widthBg = heightBg * whScale;
        // console.log('左右宽的widthBg：', widthBg);
      }
      //设置倍数是rate，倍数越大画图的图片越大，加载速度越慢
      let rate = 1;
      canvas.width = widthBg * rate;
      canvas.height = 300;
      // canvas.height = '100%'
      canvas
        .getContext("2d")
        .drawImage(
          video,
          0,
          splitHeight,
          vWidth,
          heightBg,
          0,
          0,
          canvas.width,
          canvas.height
        );
      imgbase64 = canvas.toDataURL("image/png");
      // console.log("uimgbase64rl:",imgbase64);
      resolve(imgbase64);

      // 以下为保存本地图片方案 备用之
      // const MIME_TYPE = 'image/png'; // 保存文件类型
      // const dlLink = document.createElement('a');
      // dlLink.download = '截图'; // 文件名
      // dlLink.href = imgbase64;
      // dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
      // document.body.appendChild(dlLink);
      // dlLink.click();
      // document.body.removeChild(dlLink);
    });
  });
};

// 将base64转换为blob
const dataURLtoBlob = (dataurl) => {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = window.atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
};
// 将blob转换为file
const blobToFile = (theBlob, fileName) => {
  theBlob.lastModifiedDate = new Date();
  theBlob.name = fileName;
  return theBlob;
};