今天给大家分享一下,如何实现视频封面截取功能,这里主要用到了 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...