在element-ui视频上传使用canvas截取视频帧数,并且转为视频封面。
<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;
},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App