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...
相关推荐
花花鱼1 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09335 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang135826 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning26 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人36 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00137 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css