微信小程序为video设置第一帧为缩略图(已经修改为和视频等比大小)

逻辑：在选择视频后获取视频尺寸然后在画图
记录代码

<view  style="display: inline-block;visibility:hidden; width: 300px; height: 200px;position:absolute;left:-999rpx; ">
    <canvas id="cvs1" canvas-id="mycanvas" type="2d" style="display: inline-block;border: 1px solid #CCC; width: 300px; height: {{h}}px;"></canvas>
</view>
复制代码

let w = 300
let h = 200
chooseVideo() {
    let that = this;
    // wx.compressVideo({

    // })
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: 'back',
      success: function (res) {
        // let image = res.thumbTempFilePath;
        console.log(res);
        h = res.height;
        w = res.width;
        console.log(h,w)
        that.setData({
          'publishInfo.video_thumb': '',
          'publishInfo.url': '',
          fileList: []
        })
        wx.showLoading({
          title: '上传中，请稍等',
          mask:true
        })
        wx.getVideoInfo({
          src:res.tempFilePath,
          complete(res){
            console.log(res)
          }
        })
        that.upload(res.tempFilePath).then(res => {
          that.setData({
            src: JSON.parse(res.data).message
          }, () => {
            wx.showLoading({
              title: '设置缩略图中',
              mask:true
            })
          })
          // that.data.fileList.push({
          //   url: image
          // });
          that.setData({
            'publishInfo.url': (JSON.parse(res.data).message),
          })
        });
      }
    })
  },
play(e) {
    this.draw()
  },
  draw() {
    let that = this;
    const dpr = wx.getSystemInfoSync().pixelRatio
    wx.createSelectorQuery().select('#video').context(res => {
      console.log('select video', res)
      const video = this.video = res.context

      wx.createSelectorQuery().selectAll('#cvs1').node(res => {
        console.log('select canvas', res)
        const ctx1 = res[0].node.getContext('2d')
        res[0].node.width = w * dpr
        res[0].node.height = h * dpr
        // setInterval(() => {
        ctx1.drawImage(video, 0, 0, w * dpr, h * dpr);
        // ctx1.draw(true)
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: w * dpr,
          height: h * dpr,
          destWidth: w * dpr,
          destHeight: h * dpr,
          canvas: res[0].node,
          success(e) {

            that.upload(e.tempFilePath).then(res => {
              console.log(res)
              that.data.fileList.push({
                url: JSON.parse(res.data).message
              });

              // that.setData({
              //   res11:e.tempFilePath
              // })
              that.setData({
                fileList: that.data.fileList,
                'publishInfo.video_thumb':JSON.parse(res.data).message
              })
            });
          },
          complete(e) {
            console.log(e)
            wx.hideLoading({
              complete: (res) => {},
            })
          }
        })
      }).exec()
    }).exec()
  },
复制代码

缺点因为无法动态获取视频的实际大小所以只能给个固定的宽高

更新：实现途中遇到的坑
1、真机调试时会报这样的错（只有真机调试是会出现）

2、第二个坑 （结果是在电脑模拟机上面运行正常、真机每一次第一次上传视频都无法获取封面、第二次以及之后都可以） 在调用画布和视频时才会对画布和视频进行初始化 所以要提前执行一次然后、在需要的时候设置封面
代码

play(e) {
    if(this.data.publishInfo.type == 2){
      this.draw();
      setTimeout(()=>{
        this.draw(1);
      },500)
    }
  },
  draw(b) {
    console.log("bbbb",b)
    setTimeout(() => {

      let that = this;
      let ctx;
      const dpr = wx.getSystemInfoSync().pixelRatio
      wx.createSelectorQuery().select('#video').context(res => {
        console.log('select video', res)
        const video = this.video = res.context

        wx.createSelectorQuery().selectAll('#cvs1').node(res => {
          console.log('select canvas', res)
          const ctx1 = res[0].node.getContext('2d')
          ctx = res[0].node;
          res[0].node.width = w * dpr
          res[0].node.height = h * dpr
          // setInterval(() => {
          ctx1.drawImage(video, 0, 0, w * dpr, h * dpr);
          // ctx1.draw(true)
         
          setTimeout(() => {
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: w * dpr,
              height: h * dpr,
              destWidth: w * dpr,
              destHeight: h * dpr,
              canvas: ctx,
              success(e) {
                if(b == 1){
                  that.upload(e.tempFilePath).then(res => {
                    console.log(res)
                    that.data.fileList = [];
                    that.data.fileList.push({
                      url: JSON.parse(res.data).message
                    });
  
                    // that.setData({
                    //   res11:e.tempFilePath
                    // })
                    that.setData({
                      fileList: that.data.fileList,
                      'publishInfo.video_thumb': JSON.parse(res.data).message
                    })
                    wx.hideLoading({
                      complete: (res) => {},
                    })
                  });
                }
               
              },
              complete(e) {
                console.log(e)
            
              }
            })
          })
        }).exec()
      }).exec()
    })

  },
复制代码

3、第三个坑就是wxml 的样式导致无法截图成功 这样就好多调试测试了
这样写是因为 我只要截图的效果 并没有想让在其他地方显示

<view style="position:absolute;top:0;left:-9999rpx">
	 <video style="" autoplay muted id="video" autoplay="{{true}}" controls="{{false}}" style="width: 300px; height: 200px;" src="{{src}}" bindplay="play" ></video>
<view style="display: inline-block; width: 300px; height: 200px;">
    <canvas id="cvs1" canvas-id="mycanvas" type="2d" style="display: inline-block; border: 1px solid #CCC; width: 300px; height: {{h}}px;"></canvas>
</view>
</view>
复制代码