视频截图并上传

​

本文，我们来谈谈，我们对视频进行截图之后，预览没问题之后，进行上传，我们应该怎么做呢？

思路：

1. 获取视频当前画面的信息
2. 通过 canvas 绘制当前的视频画面，并形成 base64 的数据
3. 通过接口上传到服务器，这里可以采用下面的两种方式
4. 直接将 base64 作为数据传递给后端，后端进行转文件存储
5. 前端将 base64 数据转文件数据后传递给后端，后端进行文件存储

下面，我们通过 angular 来实现下：

获取视频信息

代码语言：javascript复制

public video: any = null;
public videoWidth: number = 0;
public videoHeight: number = 0;

public getVideoInfo(): void {
  this.video = document.getElementById('video');
  this.videoWidth = this.video.videoWidth;
  this.videoHeight = this.video.videoHeight;
}

上面通过 dom 节点获取视频，然后获取视频的宽度和高度。

生成 base64

代码语言：javascript复制

public canvas: any = null;

getScreenshotsVideoBase64(): string {
  this.canvas = document.createElement('canvas');
  this.canvas.width = this.videoWidth;
  this.canvas.height = this.videoHeight;
  const ctx = this.canvas.getContext("2d");
  
  ctx.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight);
  
  const base64 = this.canvas.toDataURL('image/jpeg');
  
  return base64
}

我们首先创建一个 canvas 画布，并设置了画笔的大小 width 和 height，之后创建上下文 ctx（也就是创建了画笔