当我们需要展示视频列表时，一般的需要手动通过video文件获取视频的截图生成thumb,那么如何生成视频的第一帧图片呢？我们可以使用canvas辅助获取。
shutThumb() {
let size = 160
// 获取video节点
const video = document.getElementById("video");
video.width = size
video.height = size
video.currentTime = 1 // 第一帧的时间
//创建canvas对象
const canvas = document.createElement("canvas")
canvas.width = size
canvas.height = size
this.$nextTick(()=>{
// 利用canvas对象方法绘图
canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
// 转换成base64形式
const img = canvas.toDataURL("image/jpeg") // 这个就是图片的base64
this.coverUrl = img
})
}如上，通过指定video的当前时间，并通过canvas进行截图实现获取视频流的指定时间图片。
原文始发于微信公众号（胖蔡话前端）：Vue中如何获取视频文件的第一帧截图？
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/223120.html
