微信小程序canvas坑canvasToTempFilePath坑圖片為空，封裝canvas為組件

真的是花了一天的時間去踩坑，網上好多帖子，我基本都踩了一遍，真的是好多坑啊，淚流滿面.........

需求大致描述：用戶選擇圖片拍照或者相冊，2張圖片拼成1張，因為是多個地方使用，所以我想着封裝成一個組件，在別的頁面進行引入，拼之前每張圖片都有做處理的（如：裁剪、旋轉）然后得到的圖片數組

首先說一下我大概有報的一些錯誤吧：

1. canvasToTempFilePath：fail canvas is empty

2. An SelectorQuery call is ignored because no proper page or component is foun

3. Cannot read property '__wxWebviewId__？

4. 還有些報錯，百度的太多，找不到了，笑哭，最有印象的就是這幾個

直接上代碼，更加直觀：為了方便復制，圖片最下面有貼代碼，可能有理解沒那么好，寫的有誤的地方，歡迎各位大佬指出

 

 

 

 最后最后，我還是加了定時器，保證萬無一失

 

 canvasFn() {
      let ww, hh
      const query = this.createSelectorQuery() 
      query
        .select('#canvasStyle')
        .boundingClientRect((data) => {
          ww = data.width
          hh = data.height
          var ctx = wx.createCanvasContext('myCanvas', this) 
          ctx.setFillStyle = '#FFFFFF'
          uni.showLoading({
            title: '正在生成中...',
            mask: true,
          })
          
          let that = this 
          wx.getImageInfo({
            src: that.listImg[0].img,        
            success(res) {
              ctx.drawImage(res.path, 0, 0, 60, 60)        
              setTimeout(()=>{
　　　　　　　　　　ctx.draw(true, () => {        

 wx.canvasToTempFilePath( { fileType: 'jpg', canvasId: 'myCanvas', success: (res) => { uni.hideLoading() that.base64 = res.tempFilePath console.log('res.tempFilePath：', res) }, }, that ) })

　　　　　　　　},500)
            },
          })
        })
        .exec()
    },