点击按钮获取视频当前帧的图片

迷南。 2022-08-30 05:18 205阅读 0赞

这篇文章适合：观看视频、视频聊天过程中，点击按钮获取视频当前时间节点的图片（视频快照）。主要使用的是 canvas 转为 image。

本文以 vue+element 搭建的项目代码为例。

html

<video ref="video" controls="controls" style="width: 100px; height: 100px;" src="@/assets/a.mp4"></video>
    
    <div style="width: 100px; height: 100px; display: flex;" ref='output'></div>
    <el-button @click="copyImg">copy</el-button>

copyImg(){ 
    	let video = this.$refs.video; //获取video节点
    	let output = this.$refs.output; //获取图片展示节点
    	let canvas = document.createElement('canvas');//创建canvas元素
    	canvas.width = 480; //设置宽
        canvas.height = 640;//设置高
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); //根据video绘画canvas图形
        let img = document.createElement('img');//生成图片
        img.width = 100;//设置宽
        img.height = 100;//设置高
        img.src = canvas.toDataURL();//默认PNG格式，将canvas转化为base64格式的图片路径
        output.appendChild(img) //获取的图片插入output中
    }

效果图片：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5OTE4MA_size_16_color_FFFFFF_t_70_pic_left]  
主要是使用原生的canvas画图，然后转成image！

如果有其他方法，欢迎留言讨论！！！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5OTE4MA_size_16_color_FFFFFF_t_70_pic_left]: /images/20220829/115f77d860d649baab0bf97aeb6dd786.png