视频截图并上传

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

思路：

1. 获取视频当前画面的信息
2. 通过 canvas 绘制当前的视频画面，并形成 base64 的数据
3. 通过接口上传到服务器，这里可以采用下面的两种方式

• 直接将 base64 作为数据传递给后端，后端进行转文件存储
• 前端将 base64 数据转文件数据后传递给后端，后端进行文件存储

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

获取视频信息

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

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（也就是创建了画笔🖌️）。然后我们将当前 video 的画面绘制 drawImage 到画布上面。最后，生成 base64 数据并返回。

上传

我们获取到了 base64，那么此时我们上传给到后端处理数据了。

base64 上传

public submit():void {
  this.videoScreenshotService.postVideoScreenshot({
    base64: this.getScreenshotsVideoBase64()
  }).subscribe({
    next: (res: any) => {
      console.log(res);
    },
    error: (error: any) => {
      console.log(error);
    }
  })
}

这里我们新开一个服务，将 base64 作为 body 参数传递过去。该服务的内容可如下：

import { UrlService } from '@services/url.service';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export class VideoScreenshotService {
  constructor(
    public http: HttpClient,
    public urlService: UrlService
  ) { }
  
  // 添加视频截图
  public postVideoScreenshot(data: any): Observable<any> {
    return this.http.post(`${ this.urlService.screenShotUrl() }`, {
      base64: data.base64
    });
  }
}

当然，这一步，我们可以将 base64 赋值给 img 的 src 属性，来预览图片效果

嗯，我们可以采用另一种方式给到后端处理。

生成文件上传

我们需要将 base64 转换成文件。我们先将其转换成 blob：

// base64 转 blob
public getBlob(canvas: any): any {
  let data = canvas.toDataURL('image/png', 1);
  data = data.split(',')[1];
  data = window.atob(data);

  const ia = new Uint8Array(data.length);
  for(let i = 0; i < data.length; i++) {
    ia[i] = data.charCodeAt(i);
  }
  // 返回 blob 对象
  return new Blob([ia], {
    type: 'image/png'
  })
}

然后我们就可以将 blob 对象转换成文件：

const blobData = this.getBlob(this.canvas);
// 生成
const blobToFile = new window.File([blobData], this.videoTitle, { type: 'image/*' });

然后我们就可以将文件上传到后端：

public submit():void {
  const blobData = this.getBlob(this.canvas);
  // 生成和上传文件流
  const blobToFile = new window.File([blobData], this.videoTitle, { type: 'image/*' });
  const form_data = new FormData();
  form_data.append('file', blobToFile);
  form_data.append('snapshot', JSON.stringify({
    title: this.videoTitle, // 截图的标题
    remark: this.videoRemark, // 截图的备注
    snapshotTime: this.selectedStartMoment.valueOf() // 截图的时间
  }));
  
  this.videoScreenshotService.postVideoScreenshot(form_data).subscribe({
      next: (res: any) => {
        console.log(res);
      },
      error: (error: any) => {
        console.log(error);
      }
    })
}

相关的服务可写成下面👇：

// 添加视频截图
public postVideoScreenshot(formData: any): Observable<any> {
  return this.http.post(`${ this.urlService.screenShotUrl() }`, formData);
}

往期精彩推荐

• Flutter 仿写新闻客户端
• Dart 知识点 - 数据类型
• Flutter 开发出现的那些 Bugs 和解决方案「持续更新... 」

如果读者觉得文章还可以，不防一键三连：关注➕点赞➕收藏