JS 获取视频中某一个时间点的图像信息
2023-12-27 15:52:18
获取某个时间点的图片信息:
url
: 要获取的视频地址
currentTime
: 要获取图片的时间点信息
width
: 图片的宽度
height
: 图片的高度,可不传16/9
Promise
:返回图片base64
信息
/**
* @description: 获取某个时间点的图片信息
* @param {String} url: 视频地址
* @param {Number} currentTime: 要获取的时间点默认为1
* @param {Number} width: 生成的图片宽度
* @param {Number} height: 生成的图片高度
*/
export function getVideoFrameImage(url, currentTime = 1, width = 156, height = 88) {
return new Promise((resolve, reject) => {
let video = document.createElement('video')
video.setAttribute('src', url)
video.setAttribute('crossOrigin', 'anonymous')
video.setAttribute('preload', 'metadata')
// 视频开始可能是黑屏状态
video.currentTime = currentTime
video.addEventListener('loadeddata', function () {
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = width / 16 * 9
canvas.getContext('2d').drawImage(video, 0, 0, width, width / 16 * 9)
resolve(canvas.toDataURL('image/jpeg'))
})
})
}
效果:
文章来源:https://blog.csdn.net/Vue2018/article/details/135244818
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!