zai首先根据设计稿量出所有文案的位置与尺寸

以这个图片为例，分为一下以下几个部分：

产品封面图、英文简写、标题、价格、识别二维码、识别小提示、以及底部品牌展示

生成海报主要使用的是canvas把文字与图片结合成一张海报

    //绘制海报
    drawPoster() {
      let that = this;
      let myCanvas = uni.createCanvasContext("mycanvas", this);
      myCanvas.clearRect(0, 0, 544, 953); //544宽953高
      myCanvas.setFillStyle("#ffffff"); // 背景色
      myCanvas.fillRect(0, 0, 544, 953); //544宽953高

      myCanvas.drawImage(that.posterCover, 30, 30, 484, 484); // 封面图
      // 设置文案色
      myCanvas.setFillStyle("#000000");
      //副标
      myCanvas.font = "bold 22px Arial";
      let subtitle = this.info.subtitle;
      if (subtitle.length > 22) {
        subtitle = subtitle.slice(0, 20) + "...";
      }
      myCanvas.fillText(subtitle, 30, 560);
      // 主标
      let name = this.info.name;
      if (name.length > 12) {
        name = name.slice(0, 12) + "...";
      }
      myCanvas.font = "bold 38px Arial";
      myCanvas.fillText(name, 30, 615);

      // 价格
      myCanvas.font = `bold 28px Arial`;
      myCanvas.fillText("￥ " + this.info.price, 30, 680);

      // 分享码
      myCanvas.drawImage(that.posterCode, 364, 680, 120, 120);

      //长按识别购买
      myCanvas.font = "22px Arial";
      myCanvas.fillStyle = "#9C9C9C";
      myCanvas.fillText("长按识别购买", 362, 836);

      // 黑色背景
      myCanvas.fillStyle = "#000000";
      myCanvas.fillRect(0, 868, 544, 85);

      //wakoffee
      myCanvas.font = "26px Arial";
      myCanvas.fillStyle = "#ffffff";
      myCanvas.fillText("wakoffee", 200, 920);

      //清醒
      myCanvas.font = "18px Arial";
      myCanvas.fillStyle = "#ffffff";
      myCanvas.fillText("清醒", 315, 920);

      //开始绘画，必须调用这一步，才会把之前的一些操作实施
      myCanvas.draw(false, (res) => {
        wx.canvasToTempFilePath({
          canvasId: "mycanvas",
          fileType: "jpg",
          success: (res) => {
            this.poster = res.tempFilePath;
            this.showPoster = true;
            uni.hideLoading();
          },
          fail: () => {
            uni.showToast({
              title: "名片加载失败",
              duration: 2000,
            });
          },
        });
      });
    },

由于商品的封面图极有可能是线上的，如果你生成的是没有图片的，那么先考虑一下是否白名单没有加，此时可能查看一下微信公众后台 / 微信开发这工具进行查看

 

若没有添加域名，登录微信公众平台进行设置

如果已经添加了域名依旧无法添加，此时就要把线上的图片进行转化成本地的路径

 uni.getImageInfo({
                      src: '线上图片地址',
                      success: (image) => {
                   // 存储本地路径
                      that.posterCover = image.path;
                       
                   },
               });

转化好后在生成图片那里需要用到线上图片的就可以使用存储的本地路径了，这样图片就能展示了