视频截取封面图

function createPoster(val) {
  let videoCanList = [],
    curDateList = [];
  new Promise((reslove, reject) => {
    // 在缓存中创建video标签
    let video = document.createElement("VIDEO");
    // 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图
    video.muted = true;
    // 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图
    video.autoplay = true;
    //允许跨域访问
    video.crossOrigin = "anonymous";
    // 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源
    video.innerHTML = "<source src=" + val + ' type="audio/mp4">';
    // 再创建canvas画布标签
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    // video注册canplay自动播放事件
    //视频的总长度
    // video.currentTime = newVideo.duration / 2; // app报错
    //视频的总长度
    // video.currentTime = newVideo.duration / 2; // app报错
    video.addEventListener(
      "canplay",
      (e) => {
        // 创建画布的宽高属性节点，就是图片的大小，单位PX
        let width = video.videoWidth;
        let height = video.videoHeight;

        //默认最大尺度的尺寸限制在（1920 * 1080）
        const maxWidth = 1024,
          maxHeight = 1024,
          ratio = maxWidth / maxHeight;
        //目标尺寸
        let targetWidth = width,
          targetHeight = height;
        //当图片的宽度或者高度大于指定的最大宽度或者最大高度时,进行缩放图片
        if (width > maxWidth || height > maxHeight) {
          //超过最大宽高比例
          if (width / height > ratio) {
            //宽度取最大宽度值maxWidth,缩放高度
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (height / width));
          } else {
            //高度取最大高度值maxHeight,缩放宽度
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (width / height));
          }
        }

        var anw = document.createAttribute("width");
        anw.nodeValue = targetWidth;
        var anh = document.createAttribute("height");
        anh.nodeValue = targetHeight;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        // 画布渲染
        ctx.drawImage(video, 0, 0, targetWidth, targetHeight);
        // 生成图片
        var base64 = canvas.toDataURL("image/png", 0.8); // 这就是封面图片的base64编码
        // 视频结束播放的事件
        video.pause();

        reslove(base64); // promise函数成功的回调
      },
      false
    );
  });
}