步骤思路如下:
1.在页面上放一个隐藏不可见的video标签,暂不指定src属性。但是注意,需要设置autoplay属性,否则截取到的视频图片很可能是一张空白图
2.获取视频文件的url,赋值给video标签,同时为了保险起见,最好是再创建一个source标签,将url也赋值给source标签的src属性
3.监听video标签的canplay事件,注意,在canplay事件里,第一件事就是暂停视频播放
4.创建canvas标签,使用canvas的drawImage方法画图
代码如下:
<!-- 注意:一定要设置autoplay属性,否则截取到的图片很可能是一张空白图 -->
<video id="hiddenVideo" autoplay style="display: none;"></video>
// url: 视频文件的地址 fileType: 视频文件的类型,如video/mp4
drawVideoImg (url, fileType) {
let video = document.getElementById('hiddenVideo')
video.setAttribute('src', url)
video.setAttribute('crossOrigin', 'anonymous') // 需要设置这个属性,否则会出现跨域的问题
let source = document.createElement('scoure') // 为了确保视频能顺利播放,最好加source标签
source.setAttribute('src', url)
source.setAttribute('type', fileType)
video.appendChild(source)
video.addEventListener('canplay', () => {
video.pause() // 立刻暂停视频播放
let timeId = setTimeout(() => { // 设置延迟的目的是,可能视频真正的第一帧画面是纯黑或者纯白
let canvas = document.createElment('canvas')
canvas.width = '200'
canvas.height = '200'
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
// canvas.toDataUrl('image/png')返回的结果就是截取到的图片的base64字符串
console.log(canvas.toDataUrl('image/png'))
}, 100)
}, false)
}
顺带记录一下,将base64字符串转为文件流(File对象)的方法
base64ToFile (base64) {
let binary = atob(base64.split(',')[1])
let type = base64.split(',')[0].match(/:(.*?);/)[1]
let array = []
for (let i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i))
}
let blob = new Blob([new Uint8Array(array)], { type })
let file = new File([blob], 'video-cover.png', { type })
return file // 此时,就得到了File对象
}