canvas提取视频文件封面帧

最新推荐文章于 2024-07-19 14:52:16 发布

mofangie

最新推荐文章于 2024-07-19 14:52:16 发布

阅读量176

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/u013473997/article/details/134706563

版权

需求

在做视频上传时一般会上传一张图片作为封面图，这时就可以获取视频的一些封面帧，选择一帧当作封面图；同样在页面展示的时候视频没有封面图，也可以通过这种方法去截取一帧图，提高用户体验。

思路

1、获取视频文件

2、跳转到对应帧

3、使用canvas把对应帧画出来

4、最后返回对应的数据

获取视频文件

页面文件框

<input type="file" accept="video/*" ref="vdoFileRef" @change="changeFile" />

获取视频文件

async changeFile(e) {
  let file = e.target.files[0];
  let vdo = document.createElement('video');
  vdo.src = URL.createObjectURL(file);
}

关键帧操作

封装一个函数用来操作关键帧

```
captureFrame(vdo, time = 0) {
  return new Promise((resolve, reject) => {
       vdo.currentTime = time;
       vdo.muted = true;
       vdo.autoplay = true;
       vdo.oncanplay = () => {};
  });
}
```
这个函数需要传入视频文件和视频秒数，视频跳转到对应秒数，静音自动播放，这样在任何浏览器都可以支持，由于视频没有添加到页面所以跳转到对应秒数后不会自动播放，最后监听事件，视频可以播放后执行后续操作。oncanplay是异步操作，使用Promise包裹一层返回。
绘制关键帧

drawVideo(vdo) {
  return new Promise((resolve, reject) => {
    let cvs = document.createElement('canvas');
    let ctx = cvs.getContext('2d');
    cvs.width = vdo.videoWidth;
    cvs.height = vdo.videoHeight;
    ctx.drawImage(vdo, 0, 0, cvs.width, cvs.height);
    cvs.toBlob((blob) => {
      resolve({
        blob,
        url: URL.createObjectURL(blob),
      });
    });
  );
},

canvas是可以画视频的，所以把视频传入，根据视频大小画出当前帧，最后使用toBlob()返回想要的数据，这里返回两个数据blob可用于封面上传，url可用于预览，由于toBlob是异步操作，使用Promise包裹一层返回。

使用

在oncanplay里调用绘制关键帧的函数

vdo.oncanplay = async () => {
  let frame = await this.drawVideo(vdo);
  resolve(frame);
};

最后就是在选择文件后根据要求调用函数生成对应的封面图

async changeFile(e) {
  let file = e.target.files[0];
  let vdo = document.createElement('video');
  vdo.src = URL.createObjectURL(file);
   // 间隔1秒生成10张封面图
  for (let i = 0; i < 10; i++) {
    let frame = await this.captureFrame(vdo, i * 1);
    this.list.push(frame);
  }
}