脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue截取视频图片

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截取视频图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论