vue 视频截图获取第一帧或者某一帧

 id:传入的video容器id，imgType:截图文件的类型。

const screenshot = (id, imgType)=>{
  const video = document.getElementById(id);
  const width = video.videoWidth;
  const height = video.videoHeight;
  // 创建画布准备截图
  const canvas = document.createElement('canvas');
  // 设置video属性
  video.setAttribute('crossOrigin', 'anonymous')
  // 设置画布的宽高
  canvas.width = width;
  canvas.height = height;
  // 图片绘制
  canvas.getContext('2d').drawImage(video, 0, 0, width, height)
  
  return new Promise((resolve,reject)=>{
      try {
          let dataURL = canvas.toDataURL(imgType)
          resolve(dataURL)
      } catch (error) {
          reject(error)
      }
  })
}

 返回结果为base64编码，将base64编码转换为file对象。

export const base64ToFile = (dataurl, filename = '') => {
	let arr = dataurl.split(',')
	let mime = arr[0].match(/:(.*?);/)[1]
	let suffix = mime.split('/')[1]
	let bstr = atob(arr[1])
	let n = bstr.length
	let u8arr = new Uint8Array(n)
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n)
	}
	return new File([u8arr], `${filename}.${suffix}`, {
		type: mime
	})
}

完整使用如下

<video ref="video" id="video" width="100%" height="100%" controls autoplay crossOrigin="Anonymous" :src="info.url" />

 screenshot('video', 'image/png').then(dataURL => {
        const form = new FormData()
        form.append('file', base64ToFile(dataURL))
 })