<el-upload :http-request="getFile"//自定义上传 action :on-change="handleFileChange"//监听文件上传 ref="upload" accept="video/*"//定义格式为视频 > <el-button icon="el-icon-plus" size="small">导入</el-button> </el-upload>
- 在 Vue 实例中定义
handleFileChange
方法来处理文件改变事件。当选择一个视频文件后,handleFileChange
方法将被触发。该方法会创建一个FileReader
对象来读取视频文件并将其转成 data URL。接着,captureVideoFrame
方法会被调用,传入视频的 data URL。在captureVideoFrame
方法中,我们创建一个新的video
元素,并加载视频的 data URL。一旦视频元数据加载完成,就会触发onloadedmetadata
事件,该事件处理程序将创建一个canvas
元素,并在其中绘制视频的第一帧图像。最后,我们可以通过调用toDataURL
方法将画布上的图像数据转换为 base64 格式。
handleFileChange(file) { this.$refs.upload.clearFiles(); const reader = new FileReader(); reader.onload = event => { this.captureVideoFrame(event.target.result); }; reader.readAsDataURL(file.raw); }, captureVideoFrame(videoDataUrl) { const video = document.createElement("video"); video.src = videoDataUrl; video.onloadedmetadata = () => { const canvas = document.createElement("canvas"); const { videoWidth, videoHeight } = video; canvas.width = videoWidth; canvas.height = videoHeight; // 在视频播放到指定时间后截取画面 const snapshotTime = 1; // 截取时间点(单位:秒) video.currentTime = snapshotTime; video.onseeked = () => { // 绘制视频当前时间点的画面到画布上 canvas .getContext("2d") .drawImage(video, 0, 0, videoWidth, videoHeight); const imageDataUrl = canvas.toDataURL("image/jpeg"); // 将 base64 格式的图像数据用于显示或上传 const url = this.data64toFile(imageDataUrl); this.coverUrl = url; this.coverList.push({ url: url, flag: true }); console.log(this.coverList, "视频截图"); }; // 将 base64 格式的图像数据用于显示或上传 }; },
//对拿到的base64编码转为blob data64toFile(base64URL) { const arr = base64URL.split(","); const mime = arr[0].match(/:(.*?);/)[1]; const bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } const blob = new Blob([u8arr], { type: mime }); const url = URL.createObjectURL(blob); return url; },
标签:视频,canvas,const,url,base64,element,video From: https://www.cnblogs.com/lyq1714/p/17511973.html