/***
获取视频的封面图信息
* @param url 视频地址
* @param second 秒数
* @param fileType file类型(file, filedata)
*/
async getVideoBase64(url, second, fileType) {
const video = document.getElementById('videoRef')
let that = this
video.setAttribute('crossOrigin', 'anonymous'); // 处理跨域
video.src = url
video.setAttribute('muted', 'muted'); // 静音操作,防止播放失败
video.width = 500
video.height = 225
video.addEventListener('loadeddata', async () => {
const canvas = this.$refs.canvasRef
console.log(video.width)
canvas.width = 500;
canvas.height = 225;
if (second) {
video.currentTime = second; // 播放到当前时间的帧,才能截取到当前的画面
await video.play();
await video.pause();
}
let cxt = canvas.getContext('2d')
cxt.drawImage(video, 0, 0, video.width, video.height)
let src = canvas.toDataURL('image/jpeg') // 移除 MIME 类型前缀
const base64Data = src.split(',')[1]; // 将 Base64 数据转换为 Blob 对象
const byteString = atob(base64Data);
// 提取MIME 类型
const mimeString = src.split(',')[0].split(':')[1].split(';')[0];
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
const blob = new Blob([ab], { type: mimeString });
//创建 FormData 对象并添加 Blob 对象
const formData = new FormData();
formData.append(fileType, blob, 'file.png');
// 你可以指定一个文件名
let url = `https://api.lotusdata.com/xXXXXXX` //需要上传的服务器地址
axios.post(url, formData, {
headers: {
Authorization: this.uploadtoken,
"Content-Type": "multipart/form-data"
}}).then(res=>{
if (res.data.code === '0') {
let url = res.data.data
} else {
console.log('获取')
}
})
});
},
base64 转换为formdata 上传服务器
最新推荐文章于 2025-04-01 11:42:47 发布