公告列表
公告列表
收藏
回答

wx.canvasToTempFilePath的坑

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug wx.canvasToTempFilePath 微信iOS客户端 6.6.7 2.0.0

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

回答关注问题邀请回答
收藏

3 个回答

  • Nick
    Nick
    2018-07-12
    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来给生成图片时间，这样对开发不太友好

    2018-07-12
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-07-12

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

    2018-07-12
    有用
    回复 2
    • Nick
      Nick
      2018-07-12
      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来给生成图片时间，这样对开发不太友好


      2018-07-12
      赞
      回复
    • Flower
      Flower
      2018-08-10

      我也遇到了这个问题，当用一个数组遍历之后再wx.canvasToTempFilePath，发现只能生成第一张临时文件，后面当文件都不生成


      2018-08-10
      赞
      回复
  • 刻骨铭心
    刻骨铭心
    2018-07-12

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


    2018-07-12
    有用
    回复 2
请 登录 后发表内容
相关问题
相关文档