小程序生成海报保存到本地(1)

shareShop: function(){

    let that= this

    wx.showLoading({

      title: '加载海报中...',

    });
    // 1. 请求后端API生成小程序码
    app._post_form(api.getAppletQrCode, {

      shopId: that.data.shopId,

      width: 100,

      page: 'pages/shop-detail/index'

    }, function(result) {

      if(result.code==100){

        that.setData({

          dialogShow: true

        });


        let query = wx.createSelectorQuery()//创建节点查询器 query

        let shareCanvas = {}

        query.select('#share-canvas').boundingClientRect()//这段代码的意思是选择Id= the - id的节点，获取节点位置信息的查询请求

        query.exec(function (res) {

          that.setData({

            shareCanvas: res[0]

          });

          shareCanvas = res[0];

          const ctx = wx.createCanvasContext('shareCanvas');

          let avatarUrl = that.data.shareInfo.userPhotoUrl; //头像

          let bgImgPath = that.data.shareInfo.bgUrl; //封面大图
          
          // 根据设计图计算图片宽高比列(图片宽高为一定值)          

          let bgImgHeight = parseInt(shareCanvas.width*1.45); //封面大图高度

          let avatarHeight = (shareCanvas.height - bgImgHeight) * 0.7;

          let codeHeight = (shareCanvas.height - bgImgHeight) * 0.8;

          let avatarTop = parseInt(((shareCanvas.height - bgImgHeight - avatarHeight) * 0.5) + bgImgHeight);

          let codeTop = parseInt(((shareCanvas.height - bgImgHeight - codeHeight) * 0.5) + bgImgHeight);

          let firstX = avatarHeight + 30;

          //填充背景（图片的白色背景）

          ctx.setFillStyle('#ffffff');

          ctx.fillRect(0, 0, shareCanvas.width, shareCanvas.height);//坐标和宽高

          // 第一张图片（封面大图）

          // wx.getImageInfo使用：
          
          // 图片服务器的域名加到downloadFile 合法域名

          // 图片需要https安全域名下网址

          wx.getImageInfo({

            src: bgImgPath,

            success: function (bgRes) {

              ctx.drawImage(bgRes.path, 0, 0, shareCanvas.width, bgImgHeight);

              // 绘制标题

              ctx.setFontSize(22/that.data.ratio);

              ctx.setFillStyle('#000000');

              ctx.fillText(that.data.shareInfo.desc_first, firstX, avatarTop + 24/that.data.ratio );

              // 绘制内容

              ctx.setFontSize(22/that.data.ratio);

              ctx.setFillStyle('#000000');

              ctx.fillText(that.data.shareInfo.desc_second, firstX, avatarTop + 50/that.data.ratio);

              ctx.stroke()

              // 绘制二维码文字

              // ctx.setFontSize(16/that.data.ratio);

              // ctx.setFillStyle('#000000');

              // ctx.fillText('长按扫码查看', shareCanvas.width - ctx.measureText('长按扫码查看').width - 15, shareCanvas.height - 5);

              ctx.save();

              ctx.beginPath();

              // 第二张图片（花园 头像）

              ctx.arc(avatarHeight*0.5 + 15, avatarTop + avatarHeight*0.5, avatarHeight*0.5, 0, Math.PI * 2, false);

              ctx.clip();

              wx.getImageInfo({

                src: avatarUrl,

                success: function (avatar) {

                  ctx.drawImage(avatar.path, 15, avatarTop, avatarHeight, avatarHeight);

                  ctx.restore();

                  // 绘制二维码getImageInfo不支持显示base64编码的图片
                  // base64src为外部处理base64编码并在本地临时生成一张图片的方法

                  base64src(result.result, base64srcres => {

                    ctx.drawImage(base64srcres, shareCanvas.width - avatarHeight - 15, codeTop, codeHeight, codeHeight);

                    ctx.draw();

                    wx.hideLoading();

                  });

                }

              });

            }

          });

        });

      }else{

        app.showError('网络出小差了,请稍后重试...');

      }

    })

  }