当前位置：首页 > news >正文

js 实现视频封面截图

news 2025/8/4 23:42:44

今天给大家分享一下，如何实现视频封面截取功能，这里主要用到了 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"><videoref="video":src="videoUrl"controlsloopstyle="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.videoconst canvas = this.$refs.canvasconst ctx = canvas.getContext('2d')canvas.width = video.videoWidthcanvas.height = video.videoHeightctx.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 编码数据的字符串。例如：