vue截取视频第一帧的图片

已拿到视频的url，现在要截取视频的第一帧，作为封面图片。

在网上找了几种，都是空白。稍微改了一下，终于成功了。

基本就是用cavas进行绘制，解决一下跨域问题，截视频第一帧，然后根据视频原本的宽高进行绘制，最后转一下图片格式即可。

代码如下：

 1 <template>
 2 　　......
 3     <video :src="videoSrc" id="upvideo">您的浏览器不支持 video 标签。</video>
 4 　　......
 5     <span style="margin-left:10px; font-size:16px;">封面设置</span>
 6     <canvas id="mycanvas" style="display: none"></canvas>
 7     <img :src="imgSrc">
 8 　　......
 9 </template>
10 
11 <script>
12 export default {
13     data(){
14         return{
15             videoSrc:'xxxxxxxx', //视频的url
16             imgSrc:'',
17             ......
18         }
19     },
20     methods:{
21       ......
22       changeImage(url){
23         this.findvideocover(); //调用方法，按自己需求放在什么位置调用
24         ......
25       },
26 
27       //截取视频第一帧作为播放前默认图片
28       findvideocover(){
29         let video = document.getElementById("upvideo") 
30         let canvas = document.getElementById("mycanvas") 
31         video.crossOrigin = "anonymous"
32         video.currentTime = 1 
33         canvas.width = video.clientWidth
34         canvas.height = video.clientHeight 
35         canvas.getContext('2d').drawImage(video,0,0,canvas.width, canvas.height)
36         this.imgSrc = canvas.toDataURL('image/png')
37       },
38       ......
39     }
40 }
41 </script>