微信小程序-视频帧的截取

步骤1：首先得要有一个id为video的element元素，和一个id为cvs1的canvas元素
步骤2：获取视频的宽高(wx.getVideoInfo)，使用wx.getVideoInfo方法的时候，src如果是远程视频，需要先把视频下载下来( wx.downloadFile)
步骤3：根据视频的宽高去设置canvas的宽高

// 获取video
wx.createSelectorQuery().select('#video').context(res => {
    // console.log('select video', res)
    this.video = res.context
})
 wx.createSelectorQuery().selectAll('#cvs1').node(res => {
      // console.log('select canvas', res)
      this.ctx = res[0].node.getContext('2d')
      // 设置canvas内部的宽高
      res[0].node.width = 这里是视频的宽
      res[0].node.height = 这里是视频的高
  }).exec()

步骤4：把视频跳到指定的时间点

// 视频元素的id为video
const videoContext = wx.createVideoContext('video')
videoContext.seek(time)
videoContext.pause()

步骤5：把视频渲染到画布中

this.ctx.drawImage(this.video, 0, 0,视频的宽,视频的高);

步骤6：把canvas绘制成图片

wx.canvasToTempFilePath({
  x:0,
  y:0,
  width: 视频宽,
  height: 视频高,
  canvasId: 'cvs1',
  success(res) {
    console.log(res.tempFilePath)
  }
})

这个视频帧的文件是：wxfile://开头的，image标签无法展示