vue截取视频第一帧的图片问题
更新时间：2022年11月25日 14:28:26 作者：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截取视频图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章介绍了Vue.js中v-model指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
vue实现对highlight-current-row方式整行选中后修改默认背景颜色
这篇文章主要介绍了vue实现对highlight-current-row方式整行选中后修改默认背景颜色方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要为大家详细介绍了Vue.js列表渲染绑定jQuery插件的正确姿势，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家详细介绍了vue+highCharts实现可选范围的图表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了Vue如何通过字符串关键字符实现动态渲染input输入框。文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2022-12-12
Vue 动态组件components和v-once指令的实现
这篇文章主要介绍了Vue 动态组件components和v-once指令的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了Vue3实现地图选点组件的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
这篇文章主要为大家详细介绍了element ui表格实现下拉筛选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
有些时候客户希望产品使用他们公司要求的字体,这个时候我们需要将客户提供的字体文件引入到项目中,下面这篇文章主要给大家介绍了关于Vue项目导入字体文件的方法步骤,需要的朋友可以参考下2024-03-03
在Vue应用中，通常需要将一些状态进行持久化，以便在用户关闭浏览器或刷新页面后，常见的方法就是LocalStorage和SessionStorage，所以本文就来讲讲这两种方法的具体实现吧2023-06-06
最新评论