小程序canvas分享海报图片

  showImg() {
      wx.showLoading({
        title: "正在生成图片...",
        mask: true,
      });
      var that = this;
      let bgwidth = that.bgObj.width;
      let bgheight = that.bgObj.height;

      const screenWidth = wx.getSystemInfoSync().screenWidth; // 获取设备宽度
      const screenHeight = wx.getSystemInfoSync().screenHeight; // 获取设备高度

      //计算图片宽度
      let imgWidth = 320;
      let imgHeight = 467;

      let imgLeft = (screenWidth - imgWidth) / 2;

      const ctx = wx.createCanvasContext("myCanvas");
      // ctx.setFillStyle('#f6f6f6')

      console.log(that.bgObj, that.iconObj, that.codeObj);
      ctx.setFillStyle("#0c0c0c");
      ctx.fillRect(0, 0, screenWidth, screenHeight);
      ctx.draw();
      ctx.drawImage(that.bgObj.path, imgLeft, 20, imgWidth, imgHeight);
      ctx.draw(true);
      ctx.drawImage(that.codeObj.path, imgLeft + 90, 120, 136, 136);
      ctx.draw(true);

      ctx.setFontSize(12);
      ctx.setFillStyle("#333333");
      ctx.fillText(
        that.myRecommendData.salesman_id,
        screenWidth / 2,
        imgHeight / 2 + 48
      );
      ctx.draw(true);

      ctx.setFontSize(10);
      ctx.setFillStyle("#ffffff");
      ctx.fillText("文字", imgLeft + 30, 420);
      ctx.draw(true);

      ctx.setFontSize(18);
      ctx.setFillStyle("#ffffff");

      console.log(that.myRecommendData);

      ctx.fillText(that.myRecommendData.salesman_name, imgLeft + 30, 445);
      ctx.draw(true);

      ctx.drawImage(that.iconObj.path, imgLeft + 145, 435, 13, 13);
      // ctx.draw(true);
      ctx.setFontSize(16);
      ctx.setFillStyle("#ffffff");
      ctx.fillText(that.myRecommendData.salesman_phone, imgLeft + 165, 447);
      ctx.draw(true);
      setTimeout((item) => {
        wx.canvasToTempFilePath({
          x: imgLeft,
          y: 20,
          width: imgWidth,
          height: imgHeight,
          destWidth: imgWidth * 3,
          destHeight: (imgHeight + 40) * 3,
          canvasId: "myCanvas",
          success: function (res) {
            wx.hideLoading();
            // that.previewImage(res.tempFilePath)
            wx.showShareImageMenu({
              path: res.tempFilePath,
            });
          },
          fail: function (res) {
            console.log(res);
            wx.hideLoading();
          },
        });
      }, 1000);
    },