canvas截取多个视频的第一帧，第n秒画面-Toy模板网

这篇具有很好参考价值的文章主要介绍了canvas截取多个视频的第一帧，第n秒画面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

业务涉及视频预览，不点击视频则不播放而是先展示视频的画面给到用户

“因为本人特别喜欢梅艳芳，所以也留存了很多她的视频，这里就以她的视频做测试了”

截取多个视频的第一帧，使用：Promise+loadeddata事件+canvas

Promise来帮助我们顺序地拿到多个视频的第一帧画面

loadeddata事件的触发时机在MDN上是这样表述的：

事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。

所以如果我们想要获取第一帧，就可以使用loadeddata事件

可以直接把canvas写进该事件中【不过因为第一帧时机问题，会有右图所示的黑屏出现】

canvas截取多个视频的第一帧，第n秒画面

// 以三个视频举例子
let videoArr = ["./fengdejijie.mp4", "./xiyang.mp4", "./gushenzouwolu.mp4"]
videoArr.forEach((item) => {
    let img = document.createElement("img")
    getFirstImgBase64(item,400,240).then((res) => {
        img.src = res
    })
    document.documentElement.appendChild(img)
})

// 将截取操作封装到一个函数中
function getFirstImgBase64(url, w, h) {
  // 返回一个Promsie，这样有助于我们顺序的拿到多个视频的画面
  return new Promise(function (resolve, reject) {
    let dataURL = ""
    let video = document.createElement("video")
    video.setAttribute("crossOrigin", "anonymous") //处理跨域，保证可以读取到视频
    video.setAttribute("src", url)
    video.setAttribute("preload", "auto") // 不设置该项就不会开启预先加载视频，那么拿到的会是黑屏
    // 第一帧加载完毕时调用
    video.addEventListener("loadeddata", function () {
      let canvas = document.createElement("canvas")
      canvas.width = w //canvas的尺寸————可以理解为画板的尺寸————最终img占据的大小
      canvas.height = h
      //绘制canvas，[资源地址,绘制起始横坐标,绘制起始纵坐标,绘制宽度,绘制高度]
      //————宽度高度可以理解为绘制的图像的尺寸，和上面的画板canvas的尺寸做好区分
      canvas.getContext("2d").drawImage(video, 0, 0, w, h) 
      dataURL = canvas.toDataURL("image/jpeg") //转换为base64
      resolve(dataURL)
    })
  })
}

下面来看看截取视频的第n秒的画面如何实现

其实可以从video的currentTime入手，设置video的currentTime来让canvas截取当前时刻的画面

通过设定视频的currentTime就可以大大降低截取的画面是黑幕的概率

不过要注意自己设置的【currentTime】不能超过视频的总长度也就是video的duration属性值

video.currentTime以及video.duration拿到的数据单位是【秒】，我们确定好第几秒即可

let videoArr = ["./fengdejijie.mp4", "./xiyang.mp4", "./gushenxiyang.mp4"]
videoArr.forEach((item) => {
  let img = document.createElement("img")
  getFirstImgBase64(item, 400, 240, 135).then((res) => {
    img.src = res
  })
  document.body.appendChild(img)
})
// 将截取操作封装到一个函数中（视频地址，画板/图像宽、高，目标时刻）
function getFirstImgBase64(url, w, h, targetTime) {
  // 返回一个Promsie，这样有助于我们顺序的拿到多个视频的画面
  return new Promise(function (resolve, reject) {
    let dataURL = ""
    let video = document.createElement("video")
    console.log(video.currentTime)
    video.src = url
    video.crossOrigin = "anonymous"
    video.preload = "auto"
    // ★设定播放位置以获取当前播放位置的图像
    video.currentTime = targetTime
    // ★canplay事件——还没有加载足够的数据来播放媒体直到其结束，只加载了媒体当前位置的数据
    video.addEventListener("canplay", function () {
      console.log(video.duration, video.currentTime)
      let canvas = document.createElement("canvas")
      canvas.width = w //canvas的尺寸和图片一样
      canvas.height = h
      canvas.getContext("2d").drawImage(video, 0, 0, w, h) //绘制canvas，[资源地址,绘制起始横坐标,绘制起始纵坐标,绘制宽度,绘制高度]
      dataURL = canvas.toDataURL("image/jpeg") //转换为base64
      resolve(dataURL)
    })
  })
}

canvas截取多个视频的第一帧，第n秒画面