小程序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);
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值