html52.com
我爱小程序-开发者交流社区

canvasToTempFilePath是否有问题?为什么不能循环调用?挺奇怪的问题?

本人前台写个根据canvas生成海报的功能,基本上就是传入网络图片地址下载后循环生成图片,但是却发生生成的图片全是一样的情况,代码如下:

 createCanvasImage:function(imageUrl,goodsInfo,rx){
    let that = this;
    // console.log(goodsInfo);
    const ctxx = wx.createCanvasContext('mycanvas');    //绘图上下文
    ctxx.draw();
    ctxx.setFillStyle("#ffffff");
    ctxx.fillRect(00375667);
    // ctxx.clearRect(0, 0, 375, 667);
    // ctxx.draw(true);
    let imgpath ="";
    let timgwidth =0;
    let timgheight =0;
    var ration = 0;
    var realhight =375;
    wx.getImageInfo({
      src: imageUrl,
      successfunction (titleimgInfo{
        timgwidth= titleimgInfo.width;
        timgheight = titleimgInfo.height;
        ration = titleimgInfo.width/titleimgInfo.height;   //图片的真实宽高比例
        //  imgpath = titleimgInfo.path;
        //  console.log(timgwidth);
        //  console.log(timgheight);
        realhight = parseInt(Math.round(375*ration));
        //  console.log(ration)
        //  console.log(realhight)
        console.log(imageUrl);
        console.log(titleimgInfo.path);
       
      }
    });
    if(realhight>0){
      const promise =new Promise((resolve,reject)=>{
        wx.downloadFile({
          url: imageUrl,
          success:function(resule){
            if(resule.statusCode===200){
              console.log(imageUrl);
              console.log('图片已下载成功!'+rx);
              ctxx.drawImage(resule.tempFilePath,0+rx,0,375,realhight);
              console.log(resule.tempFilePath);
              ctxx.draw(true, setTimeout(function () {
                wx.canvasToTempFilePath({
                  canvasId'mycanvas',
                  successfunction (res{
                    console.log(res);
                    // console.log(res.tempFilePath);
                    var tempFilePath = res.tempFilePath;
                    // that.setData({
                    //   imagePath: tempFilePath
                    // });
                    that.saveBill(tempFilePath);
                  },
                  failfunction (res{
                    // console.log(res);
                  }
                })
              }, 3000));
  
            }
           
          }
        })
      })
      promise.then(res=>{
        console.log(res)
      },err=>{
        cosole.log(err)
      })
    }
          // }else{
    //   ctxx.drawImage(titleimgInfo.path,0,0,375,375);
    //   ctxx.draw(true);
    // }


  },

运行成功以后后台打印的参数如下:

http://yanxuan.nosdn.127.net/e866882f7bb9acde7c4e1d00171741f9.jpg
goods.js? [sm]:290 图片已下载成功!10
goods.js? [sm]:292 wxfile://tmp_b4f638cafa7cff4c447e9d979126244a9726478e2cde683c.jpg
goods.js? [sm]:289 http://yanxuan.nosdn.127.net/bf80a04940ae1cd3e6c584d26fdee6ed.jpg
goods.js? [sm]:290 图片已下载成功!30
goods.js? [sm]:292 wxfile://tmp_1e2e49185e8404a6e8654c4c6e92aa135adfeffa0199df12.jpg
goods.js? [sm]:289 http://yanxuan.nosdn.127.net/23947cb71c6c2f9635b53da910ac788d.jpg
goods.js? [sm]:290 图片已下载成功!20
goods.js? [sm]:292 wxfile://tmp_d04d80a9f9bc4ace3cfe7234a70648b1f874b4cc349e23de.jpg
goods.js? [sm]:289 http://yanxuan.nosdn.127.net/5a9050413ef325301e5e5b6bfdcc4b58.jpg
goods.js? [sm]:290 图片已下载成功!0
goods.js? [sm]:292 wxfile://tmp_d81efbbb6b6febe235bf5a1e1b6a4b59fb4d37ee11da027e.jpg
goods.js? [sm]:272 http://yanxuan.nosdn.127.net/e866882f7bb9acde7c4e1d00171741f9.jpg
goods.js? [sm]:273 wxfile://tmp_91b4f6116b0ea84f124f7fb265a1e8acc56a621cc80d16b0.jpg
goods.js? [sm]:272 http://yanxuan.nosdn.127.net/bf80a04940ae1cd3e6c584d26fdee6ed.jpg
goods.js? [sm]:273 wxfile://tmp_b131ae5dfac6abfb427521611e2181e2838cb8d8e85b281d.jpg
goods.js? [sm]:272 http://yanxuan.nosdn.127.net/23947cb71c6c2f9635b53da910ac788d.jpg
goods.js? [sm]:273 wxfile://tmp_fd35884eebde0eb4f7a4893f6a9fec28272b4f01b8b3a5d9.jpg
goods.js? [sm]:272 http://yanxuan.nosdn.127.net/5a9050413ef325301e5e5b6bfdcc4b58.jpg
goods.js? [sm]:273 wxfile://tmp_731528cfa5274a910e509f5b3d276422da580577b7698eb7.jpg

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付