如何取视频第一帧作为封面图片上传

步骤思路如下：
1.在页面上放一个隐藏不可见的video标签，暂不指定src属性。但是注意，需要设置autoplay属性，否则截取到的视频图片很可能是一张空白图
2.获取视频文件的url，赋值给video标签，同时为了保险起见，最好是再创建一个source标签，将url也赋值给source标签的src属性
3.监听video标签的canplay事件，注意，在canplay事件里，第一件事就是暂停视频播放
4.创建canvas标签，使用canvas的drawImage方法画图

代码如下：

<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对象
}