步骤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标签无法展示