微信小程序原生 canvas画布截取视频帧保存为图片并进行裁剪

html页面：

视频尺寸过大会画布会撑开屏幕，要下滑

尺寸和视频链接是从上个页面点击传过来的，可自行定义

<canvas id="cvs1" type="2d" style="width: {{videoWidth}}px;height: {{videoHeight}}px;"></canvas>
<video id="video" src="{{tempFilePath}}" bindtimeupdate="timeUpdate"></video>
<t-button class="block" bind:tap="getCanvas" theme="primary">立即截图</t-button>
<image src="{{cropurl}}" style="width: 100%;" mode="widthFix" />

js:

 timeUpdate: function (e) {//实时播放进度 秒数var currentTime = parseInt(e.detail.currentTime)this.setData({'currentTime': currentTime,});// console.log("视频播放到第" + currentTime + "秒") //查看正在播放时间，以秒为单位},//绘制截图getCanvas() {const dpr = wx.getSystemInfoSync().pixelRatiowx.createSelectorQuery().select('#video').context(res => {console.log('select video', res)const video = this.video = res.contextvideo.pause() // 暂停视频，防止继续播放video.seek(this.data.currentTime) // 将视频定位到当前时间// console.log("视频宽度高度", this.data.videoWidth, this.data.videoHeight)wx.createSelectorQuery().selectAll('#cvs1').fields({node: true,size: true}).exec((res) => {console.log('select canvas', res)const canvas = res[0][0].nodeconst ctx1 = res[0][0].node.getContext('2d')res[0][0].node.width = this.data.videoWidthres[0][0].node.height = this.data.videoHeight//图片加载完成后绘制到画布上ctx1.drawImage(video, 0, 0, this.data.videoWidth, this.data.videoHeight);console.log("ctx1=>", ctx1)wx.canvasToTempFilePath({width: this.data.videoWidth,height: this.data.videoHeight,canvas: canvas,success: (res) => {console.log("图片路径", res.tempFilePath)
//一定要有这一步不然拿到的是空白图片this.setData({canvasurl: res.tempFilePath})//裁剪图片wx.cropImage({src: this.data.canvasurl, // 图片路径cropScale: '4:3', // 裁剪比例success: (res) => {console.log('裁剪后图片', res)this.setData({cropurl: res.tempFilePath})}})},fail: (err) => {console.log(err)}})})//   //base64//   // setTimeout(() => {//   //   this.setData({//   //     // 导出canvas的url(base64格式)//   //     canvasurl: canvas.toDataURL('image/png'),//   //     show: true//   //   })}).exec()},