js截取视频第一帧图片

最新推荐文章于 2024-05-02 15:34:56 发布

张开心

最新推荐文章于 2024-05-02 15:34:56 发布

阅读量410

点赞数

文章标签： javascript 音视频前端

本文链接：https://blog.csdn.net/QY_99/article/details/127108853

版权

video canvas Base64 跨域编码转换

关键词由CSDN通过智能技术生成

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);
      });
    });
  };