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...
相关推荐
不爱说话郭德纲4 分钟前
产品:上传图片拖拽一下怎么了 ?
前端·javascript·vue.js
make9 分钟前
AI 流式请求工具函数 (通义千问)
前端·javascript
作曲家种太阳11 分钟前
加餐-Vue3的渲染系统流程解说【手摸手带你实现一个vue3】
前端
前端太佬17 分钟前
前端对接微信扫码登录:从踩坑到填坑的全记录
前端·javascript·微信
京东零售技术25 分钟前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
前端·开源
18538162800余。28 分钟前
碰一碰发视频源码搭建全解析,支持OEM
音视频
聂 可 以30 分钟前
推荐几个免费提取音视频文案的工具(SRT格式、通义千问、飞书妙记、VideoCaptioner、AsrTools)
音视频·飞书·开源软件
前端大白话41 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys43 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话1 小时前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员