Vue+canvas实现视频截图功能
更新时间:2022年07月14日 15:15:37 作者:如梦如戈
这篇文章主要为大家详细介绍了Vue+canvas实现视频截图功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
开发过程中遇到一个实际问题,上传的视频需要提供视频封面(视频封面必填)。封面可以自己制作并上传,但是这样需要脱离网站,用其他方式制作封面,使用体验并不友好,因此第一个想到的方案是:上传视频时,若人员未上传封面,自动截取视频第一帧作为封面,但是这样会出现一种情况:视频第一帧是黑色,导致封面为黑色。因此考虑视频上传后,在播放中由人员自行截取画面作为视频封面。
简单效果如图:
前端代码如下:
<template> ? <div> ? ? <video src="http://9i0i.com/pic.php?p=https://{{视频地址}}.mp4" ? ? ? ? ? ?crossOrigin="Anonymous" controls style="width:300px;"></video> ? ? <img :src="http://9i0i.com/pic.php?p=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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。
您可能感兴趣的文章:
最新评论