vue 视频截图获取第一帧或者某一帧
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/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))
})
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 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐

所有评论(0)