原理：
播放视频，canvas截图，base64转文件
播放视频：input file选择文件，video播放视频
1 | <video id="videoPlayer" controls="controls" style="width:100%;max-height:400px;"></video> |
用户选择了本地视频文件后，设置video的src属性
1 | var video = this.$refs.fileInput.files[0]; |
2 | var url = URL.createObjectURL(video); |
4 | document.getElementById("videoPlayer").src=url; |
截图：
vue的script中
02 | const video = document.getElementById('videoPlayer'); |
03 | const canvas = document.createElement('canvas'); |
04 | const ctx = canvas.getContext('2d'); |
05 | const imgHeight = video.videoHeight; |
06 | const imgWidth = video.videoWidth; |
07 | ctx.drawImage(video, 0, 0, imgWidth*0.2, imgHeight*0.2); |
08 | this.imgSrc = canvas.toDataURL('image/png'); |
11 | var blob = this.dataURLtoBlob(this.imgSrc, "image/png") |
12 | var file = new File([blob], "video_image.png", { type: "image/png", lastModified: Date.now() }) |
globalFunc.js中，此js再main.js中引用，不一定非得这么写，只是比较通用的函数没必要每个vue中都写一遍,由此到处
到处全局函数
01 | exports.install = function(Vue, option){ |
02 | Vue.prototype.dataURLtoBlob = function (dataURI,type) { |
03 | var binary = atob(dataURI.split(',')[1]); |
05 | for(var i = 0; i < binary.length; i++) { |
06 | array.push(binary.charCodeAt(i)); |
08 | return new Blob([new Uint8Array(array)], {type:type}); |
main.js中
1 | import globalFunc from '@/components/globalFunc' |
由此，通过creatImg可以获得视频播放时的一帧，然后生成文件，此文件和input file选择的文件一样，可以通过format-data类型的post传输
缺点：video必须播放，不过设置visibility: hidden属性后用户就看不出来了
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
