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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。