// 获取视频文件第一帧
export function oneImgUtil(file) {
return new Promise((resolve, reject) => {
// 创建一个 <video> 元素
const video = document.createElement('video')
video.setAttribute('crossOrigin', 'anonymous')
video.currentTime = 1 //currentTime 属性设置或返回视频播放的当前位置（以秒计） 重要！不设置会导致第一帧图片不显示
// 监听视频加载完成事件
video.addEventListener('loadeddata', function () {
// 将视频的第一帧绘制到 canvas 上
// 创建一个 <canvas> 元素
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
// 设置 canvas 的宽高与视频的宽高相同
canvas.width = video.videoWidth
canvas.height = video.videoHeight
// setTimeout(()=>{
context.drawImage(video, 0, 0, canvas.width, canvas.height)
// 将 canvas 转换为图片并显示
const dataURL = canvas.toDataURL() // 默认格式为 PNG
let files = setFile(dataURL)
resolve(files)
})
// 选择用户上传的视频文件
function changeImg(file) {
// 读取视频文件并将其赋值给 <video> 元素的 src 属性
const reader = new FileReader()
reader.onload = function (e) {
video.src = e.target.result
}
reader.readAsDataURL(file)
}
changeImg(file)
})
}
// base64转换file
function setFile(base64) {
const arr = base64.split(',')
const type = arr[0].match(/:(.*?);/)[1]
const size = window.atob(arr[1])
let n = size.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = size.charCodeAt(n)
}
return new File([u8arr], Date.now(), { type })
}
获取文件第一帧
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 在项目中，有时候需要抓取视频文件的某一帧图像做为预览图片，那到底应该怎么获取这个图片呢？ Android为我们提供...
