Vue+canvas实现视频截图功能

开发过程中遇到一个实际问题，上传的视频需要提供视频封面（视频封面必填）。封面可以自己制作并上传，但是这样需要脱离网站，用其他方式制作封面，使用体验并不友好，因此 第一个 想到的方案是：上传视频时，若人员未上传封面，自动截取视频第一帧作为封面，但是这样会出现一种情况：视频第一帧是黑色，导致封面为黑色。 因此考虑视频上传后，在播放中由人员自行截取画面作为视频封面。

简单效果如图：

前端代码如下：

<template>
? <div>
? ? <video src="https://{{视频地址}}.mp4"
? ? ? ? ? ?crossOrigin="Anonymous" controls style="width:300px;"></video>
? ? <img :src="imgSrc">
? ? <div>
? ? ? <el-button @click="cutPicture">
? ? ? ? 截图
? ? ? </el-button>
? ? </div>
? ? <canvas id="myCanvas" width="343" height="200"></canvas>
? </div>
</template>
<script>

? export default {
? ? name: 'video',
? ? data () {
? ? ? return {
? ? ? ? imgSrc: '',
? ? ? ? videoData:{},
? ? ? }
? ? },
? ? methods: {
? ? ? //截取当前帧的图片
? ? ? cutPicture () {
? ? ? ? let self = this
? ? ? ? var v = document.querySelector('video')
? ? ? ? let canvas = document.getElementById('myCanvas')
? ? ? ? // canvas.setAttribute("crossOrigin",'Anonymous')
? ? ? ? var ctx = canvas.getContext('2d')
? ? ? ? ctx.drawImage(v, 0, 0, 343, 200)
? ? ? ? var oGrayImg = canvas.toDataURL('image/jpeg')
? ? ? ? // this.imgSrc = oGrayImg
? ? ? ? // axios请求，将截图传给后端API
? ? ? ? this.$axios.post('test/upload', {file: oGrayImg})
? ? ? },
? ? }
? }
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于Vue+canvas实现视频截图功能的详细内容...