wx.canvasToTempFilePath的坑
发布于 7 年前 作者 yan07 2965 次浏览 来自 问答

wx.canvasToTempFilePath 这个API假如我有N张卡片，需要生成绘制N张CANVAS图，生成N张对应的分享图片，调用这个API就会有问题，只生成第一张图片，后面无法生成，还要预估给一个setTimeout延迟，让它绘制完成，能不能改良下这个API，增加一个异步的。

3 回复

麻烦给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题

这个本身就是异步操作吧？回调接口都有了

this.cardDataList.reduce((curr, r1, k1, arr1) => {
        return curr.then(() => {
          return r1.trips.reduce((curr, r2, k2) => {
            return curr.then(() => {
              if (r2.triptype === 'flight') {
                return this.drawShareCanvas(k1, k2, arr1);
              }
            });
          }, Promise.resolve());
        });
      }, Promise.resolve());
 
 
drawShareCanvas(idx1, idx2, array) {
      ......
      ......
      return new Promise(resolve => {
        setTimeout(() => {
          resolve();
        }, 500);
      }).then(() => {
        return wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 216,
          height: 174,
          destWidth: 216 * 4,
          destHeight: 174 * 4,
          canvasId: aid,
          success: res => {
            data.sharePicurl = res.tempFilePath;
            this.$store.dispatch('journey/updateCardDataByShare', array);
            return data;
          }
          // fail: err => {
          //   console.error(err);
          // }
        });
      });
    }
  },

this.cardDataList是我的卡片组，如果直接map来调用drawShareCanvas函数（内部的wx.canvasToTempFilePath），只会绘制第一张卡片，所以我不得不将它改为Promise.resolve()的异步调用形式来遍历数据，而且内部加了一个setTimeout来给生成图片时间，这样对开发不太友好

回到顶部