前端获取视频缩略图视频帧图片

MAIMIHO

已于 2022-09-19 14:59:57 修改

阅读量1.4k

点赞数 1

分类专栏： Web Vue Uniapp 文章标签：前端音视频 javascript

于 2022-09-17 10:24:18 首次发布

本文链接：https://blog.csdn.net/MAIMIHO/article/details/126899213

版权

Web 同时被 3 个专栏收录

35 篇文章 2 订阅

订阅专栏

Vue

20 篇文章 0 订阅

订阅专栏

Uniapp

18 篇文章 1 订阅

订阅专栏

export function getVideoFrameImage(url, width = 200, height = 200) {
  return new Promise((resolve, reject) => {
    const video = document.createElement("video");
    video.setAttribute("crossOrigin", "anonymous");
    video.setAttribute("preload", "metadata");
    video.setAttribute("src", url);
    // 视频开始可能是黑屏状态
    video.currentTime = 1;
    video.addEventListener("loadeddata", function () {
      const canvas = document.createElement("canvas");
      const { videoWidth, videoHeight } = video;
      const height = height || videoHeight * (width / videoWidth);
      canvas.width = width;
      canvas.height = height;
      canvas.getContext("2d").drawImage(video, 0, 0, 200, height);
      resolve(canvas.toDataURL("image/jpeg"));
    });
  });
}