共计 917 个字符,预计需要花费 3 分钟才能阅读完成。
1. 电脑系统 win11 专业版
2. 开发环境 vue2+element
3. 在开发的过程中, 咱们会遇到截取视频第一帧转换成图片的需要, 上面我来分享一下办法:
// 上传视频的时候调用对应的办法
videoRef.oncanplay = () => {let canvas = document.createElement("canvas");
let ctx = canvas.getContext('2d');
canvas.width = videoRef.clientWidth; // 获取视频宽度
canvas.height = videoRef.clientHeight; // 获取视频高度
// 利用 canvas 对象办法绘图
ctx.drawImage(videoRef, 0, 0, videoRef.clientWidth, videoRef.clientHeight);
// 转换成 base64 模式
const imgBase64 = canvas.toDataURL("image/png");
const fileName = resultFileName + ".png";
console.log(dataURLtoFile(imgBase64,fileName));
// 生成对应的 file 文件
const fileData = dataURLtoFile(imgBase64,fileName);
}
export const dataURLtoFile = (dataurl, fileName) => {let binary = atob(dataurl.split(",")[1]);
let mime = dataurl.split(",")[0].match(/:(.*);/)[1];
let array = [];
for (let i = 0; i < binary.length; i++) {array.push(binary.charCodeAt(i));
}
let fileData = new Blob([new Uint8Array(array)],{type:mime});
return new File([fileData],fileName,{type:mime});
}
99. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。
正文完
发表至: javascript
2023-09-01