js 实现视频封面截图

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

html 复制代码
<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>
javascript 复制代码
<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 可以被用于在网页上直接显示图像,或者在服务器端处理时作为图像数据的传输方式。

语法

javascript 复制代码
var dataURL = canvas.toDataURL(mimeType, quality);

参数

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

返回值

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

javascript 复制代码
data:image/png;base64,iVBORw0KG...
相关推荐
初遇你时动了情9 分钟前
uniapp 城市选择插件
开发语言·javascript·uni-app
韩曙亮35 分钟前
【FFmpeg】FFmpeg 内存结构 ③ ( AVPacket 函数简介 | av_packet_ref 函数 | av_packet_clone 函数 )
ffmpeg·音视频·avpacket·av_packet_clone·av_packet_ref·ffmpeg内存结构
zhangjr057543 分钟前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱1 小时前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
zongzi_4941 小时前
二次封装的天气时间日历选择组件
开发语言·javascript·ecmascript
木子七1 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼1 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态1 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚1 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
WilliamLuo2 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发