//首先设置好video元素
const video = document.createElement('video')
video.setAttribute('crossOrigin', 'anonymous')
//src通过file拿
src = URL.createObjectURL(file)
video.setAttribute('src', src)
video.setAttribute('width', '1920px')
video.setAttribute('height', '1080px')
video.setAttribute('preload', 'auto')
//第一帧事件
video.onloadeddata = async function () { // 当前帧数据加载完成,下一帧数据未记载事件
//绘制canvas保存图片
const canvas = document.createElement('canvas'),
width = video.width, // canvas的尺寸和图片一样
height = video.height
canvas.width = width
canvas.height = height
const ctx = canvas.getContext('2d')
ctx.drawImage(video, 0, 0, width, height)
const dataURL = canvas.toDataURL('image/jpeg')
const blob = dataURLtoFile(dataURL, '132.jpg')//base64转blob,名字自定义
//上传图片到服务器
let formData = new FormData()
formData.append('ava', blob)
axios.post(url,formData)
}
const dataURLtoFile = (dataUrl: any, filename: any) => {
const arr = dataUrl.split(',')
const mime = arr[0].match(/:(.*?)
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
}