js 实现视频封面截图

今天给大家分享一下，如何实现视频封面截取功能，这里主要用到了 HTML5 的 canvas 相关的 api 和 js 相关的一些知识，话不多说，直接上代码： 

<template>
  <div>
    <div class="margin-tb-sm">
      <button type="primary" @click="cutImage">请截取封面</button>
    </div>
    <div class="flex margin-top-sm">
      <div class="padding-right-xs">
        <video
          ref="video"
          :src="videoUrl"
          controls
          loop
          style="max-width: 200px;"
          crossorigin="anonymous" ></video>
        <!-- crossorigin="anonymous" 如果视频链接和你的项目不在一个域名下，加上这个解决跨域 -->
      </div>
      <div class="padding-left-xs">
        <canvas ref="canvas" style="display: none;"></canvas>
        <img v-show="coverImageBase64" :src="coverImageBase64" alt="封面图" style="max-width: 200px;" ref="coverImage" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      coverImageBase64: '', // 视频封面截图
      videoUrl: 'example.mp4' // 替换成你的视频地址
    }
  },
  methods: {
    cutImage() {
      this.$refs.video.pause()
      this.clearCanvas()
      this.capturePoster()
    },
    clearCanvas() {
      const canvas = this.$refs.canvas // 获取canvas元素
      var ctx = canvas.getContext('2d') // 获取2D渲染上下文
      ctx.clearRect(0, 0, canvas.width, canvas.height) // 重置画布尺寸清空画布
    },
    capturePoster() {
      const video = this.$refs.video
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
      // toDataURL() 将画布上的所有内容（包括绘制的图形、文本、图像等）编码为一个 base64 编码的字符串
      const base64Data = canvas.toDataURL('image/png')
      this.coverImageBase64 = base64Data
    },
    base64ToBlob(base64Data, contentType) {
      const sliceSize = 512
      // atob() 用于解码 Base64 编码字符串
      const byteCharacters = atob(base64Data.split(',')[1])
      const byteArrays = []
      for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize)
        const byteNumbers = new Array(slice.length)
        for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        byteArrays.push(byteArray)
      }
      return new Blob(byteArrays, { type: contentType })
    }
  }
}
</script>

知识点归纳： 

atob() 方法是一个非常实用的 JavaScript 内置函数，可以轻松地处理 base-64 编码的数据 ；

canvas.toDataURL() 是用于将 HTML5 <canvas> 元素的内容转换为一个数据 URL（data URL）的方法。这个数据 URL 可以被用于在网页上直接显示图像，或者在服务器端处理时作为图像数据的传输方式。

语法

var dataURL = canvas.toDataURL(mimeType, quality);

参数

• mimeType (可选): 指定输出图像的 MIME 类型。默认值是 image/png，但你也可以指定其他格式，如 image/jpeg。
• quality (仅用于 JPEG 格式，可选): 指定图像的质量，范围从 0.0（最差质量，文件最小）到 1.0（最佳质量，文件最大）。如果省略该参数，则默认值为 0.92。

返回值

该方法返回一个包含完整 MIME 类型和 base64 编码数据的字符串。例如：

data:image/png;base64,iVBORw0KG...