截取视频第一帧图片

1、body中

<input type="file" accept="video/mp4,video/avi,video/rmvb" @change="handleFile" id="fileUpload">
<!-- 
	截取视频第一帧用 
	videoPreviewUrl:视频地址
-->
<div id="video-canvas-img" style="position: absolute;right: 2000px;z-index: -1;opacity: 0;">
	<video id="the-video" controls :src="videoPreviewUrl"></video>
</div>

2、逻辑书写

handleFile(){
	let $target = e.target || e.srcElement;
	let file = $target.files[0];
	this.videoToURL(file).then(res=>{
		this.videoMsg.videoFile = file;
		let videoDom = document.getElementById("the-video");
		this.videoPreviewUrl = res;
		setTimeout(() => {
			videoDom.addEventListener('loadeddata',this.captureImage(videoDom));
		}, 1000);
	});
}
videoToURL(file) {
	return new Promise((reslove,reject)=>{
		var url = null ;
		if (window.createObjectURL!=undefined) { // basic
			url = window.createObjectURL(file) ;
		} else if (window.URL!=undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file) ;
		} else if (window.webkitURL!=undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file) ;
		}
		reslove(url);
	})
},
captureImage(dom){
	let scale = 0.5;
	var canvas = document.createElement("canvas");
	canvas.width = dom.videoWidth * scale;
	canvas.height = dom.videoHeight * scale;
	canvas.getContext('2d').drawImage(dom, 0, 0, canvas.width, canvas.height);
	let devBgImg = new Image();
	let imgUrl = canvas.toDataURL("image/png");
	devBgImg.src = imgUrl ;
	devBgImg.onload=()=>{
		this.videoLoading = false;
		let picFile = this.dataURLtoFile(imgUrl);
		//picFile  就是图片的file对象
	}
},
	```