js截取视频第一帧图片

const getVideoBase64 = (url: any) => {
    //url为视频链接地址
    return new Promise(function (resolve, reject) {
      let dataURL = '';
      const video = document.createElement('video');
      video.setAttribute('crossOrigin', 'Anonymous'); // 处理跨域
      video.setAttribute('src', url);
      video.setAttribute('preload', 'auto'); // auto|metadata|none
      video.addEventListener('loadeddata', function () {
        const canvas = document.createElement('canvas');
        // canvas的尺寸和设置的视频宽高一样
        // const width = video.width
        // const height = video.height
        // 如果未设置创建时视频的宽高,则使用默认视频的宽高
        const width = video.videoWidth;
        const height = video.videoHeight;
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d')?.drawImage(video, 0, 0, width, height); // 绘制canvas
        dataURL = canvas.toDataURL('image/jpeg'); // 转换为base64
        resolve(dataURL);
      });
    });
  };

你可能感兴趣的:(学习笔记,javascript,音视频,前端)