vue截取视频第一帧的图片问题
作者：silvia喵
这篇文章主要介绍了vue截取视频第一帧的图片问题,基本就是用cavas进行绘制，解决一下跨域问题，截视频第一帧，然后根据视频原本的宽高进行绘制，最后转一下图片格式即可，需要的朋友可以参考下
已拿到视频的url，现在要截取视频的第一帧，作为封面图片。
在网上找了几种，都是空白。稍微改了一下，终于成功了。
基本就是用cavas进行绘制，解决一下跨域问题，截视频第一帧，然后根据视频原本的宽高进行绘制，最后转一下图片格式即可。
代码如下：
<template>
......
<video :src="videoSrc" id="upvideo">您的浏览器不支持 video 标签。</video>
......
<span style="margin-left:10px; font-size:16px;">封面设置</span>
<canvas id="mycanvas" style="display: none"></canvas>
<img :src="imgSrc">
......
</template>
<script>
export default {
data(){
return{
videoSrc:'xxxxxxxx', //视频的url
imgSrc:'',
......
}
},
methods:{
......
changeImage(url){
this.findvideocover(); //调用方法，按自己需求放在什么位置调用
......
},
//截取视频第一帧作为播放前默认图片
findvideocover(){
let video = document.getElementById("upvideo")
let canvas = document.getElementById("mycanvas")
video.crossOrigin = "anonymous"
video.currentTime = 1
canvas.width = video.clientWidth
canvas.height = video.clientHeight
canvas.getContext('2d').drawImage(video,0,0,canvas.width, canvas.height)
this.imgSrc = canvas.toDataURL('image/png')
},
......
}
}
</script>
<template>
......
<video :src="videoSrc" id="upvideo">您的浏览器不支持 video 标签。</video>
......
<span style="margin-left:10px; font-size:16px;">封面设置</span>
<canvas id="mycanvas" style="display: none"></canvas>
<img :src="imgSrc">
......
</template>
<script>
export default {
data(){
return{
videoSrc:'xxxxxxxx', //视频的url
imgSrc:'',
......
}
},
methods:{
......
changeImage(url){
this.findvideocover(); //调用方法，按自己需求放在什么位置调用
......
},
//截取视频第一帧作为播放前默认图片
findvideocover(){
let video = document.getElementById("upvideo")
let canvas = document.getElementById("mycanvas")
video.crossOrigin = "anonymous"
video.currentTime = 1
canvas.width = video.clientWidth
canvas.height = video.clientHeight
canvas.getContext('2d').drawImage(video,0,0,canvas.width, canvas.height)
this.imgSrc = canvas.toDataURL('image/png')
},
......
}
}
</script>到此这篇关于vue截取视频第一帧的图片问题的文章就介绍到这了,更多相关vue截取视频图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！