生成专属二维码海报且下载(小程序)

小程序生成海报功能

这是核心两个图片合成一个图片的代码

##wxml部分


##js部分
//写到业务代码中去,点击合成还是进入页面就合成
    wx
        .createSelectorQuery ()
        .select ('#myCanvas') // 在 WXML 中填入的 id
        .fields ({node: true, size: true})
        .exec (async res => {
          // Canvas 对象
          const canvas = res[0].node;
          // 渲染上下文
          const ctx = canvas.getContext ('2d');
            // Canvas 画布的实际绘制宽高
          const width = res[0].width;
          const height = res[0].height;
          // 初始化画布大小
          const dpr = wx.getWindowInfo ().pixelRatio;
          canvas.width = width * dpr;
          canvas.height = height * dpr;
          await ctx.scale (dpr, dpr);
          // 图片对象
          const image = canvas.createImage (); //本地背景图
          const imgs = canvas.createImage (); //接口返回二维码图片
          // 图片加载完成回调
          image.onload = async () => {
            // 将图片绘制到 canvas 上
            await ctx.drawImage (image, 0, 0, 300, 300); //海报的大小和位置
            await ctx.drawImage (imgs, 125, 125, 50, 50);//配置二维码的大小和偏移的位置,我这边配置的是在海报最中间
          };
          // 设置图片src
          imgs.src = this.data.fileList[1].path;//图片1海报背景
          image.src = this.data.fileList[0].path;//专属二维码
          //没加定时器之前合成的图片是一片灰色，加了之后才有图片，测试了一下最少需要400毫秒
          setTimeout (() => {
            wx.canvasToTempFilePath ({
              canvas: canvas,
              success: res => {
                // 生成的图片临时文件路径
                this.setData ({
                                          img: res.tempFilePath,
                                    });
                        },
                    });
            }, 1000);
        });

// 保存图片到本地
getAvaterInfo (url) {
    wx.saveImageToPhotosAlbum ({
      filePath: url,
      success (res) {
        wx.showModal ({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) {
            }
          },
          fail: function (res) {},
        });
      },
    });
  },