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))
 })

GitHub 加速计划 / vu / vue
108
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐