Js知识整理 - 截取视频第一帧为封面图片

js截取视频第一帧作为封面图

export function indvideocover(url) {
	const video = document.createElement('video') // 也可以自己创建video
	video.src = url // url地址 url跟 视频流是一样的
	video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
	video.currentTime = 1 // 第一帧

	video.oncanplay = () => {
		let canvas = document.createElement('canvas') // 获取 canvas 对象
		const ctx = canvas.getContext('2d') // 绘制2d
		
		canvas.width = video.clientWidth ? video.clientWidth : 320 // 获取视频宽度
		canvas.height = video.clientHeight ? video.clientHeight : 320 //获取视频高度
		// 利用canvas对象方法绘图
		ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
		// 转换成base64形式
		const videoFirstImgsrc = canvas.toDataURL('image/png') // 截取后的视频封面
		
		video.remove()
		canvas.remove()
		return {
		  url: videoFirstImgsrc,
		  realUrl: url,
		}
	}
}