微信小程序如何使用canvas进行多信息图片拼接（粘贴代码可用）

首先要展示wxml

下面来展示js部分

 import UserManager from '../../utils/userManager.js';
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        resultComment: '学霸' //测试数据
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        UserManager.getUserInfo().then((_user) => {
          this.setData({
            product_img: options.product_img,
            avatarUrl: _user.avatar_url,
            nickName: _user.nickname
          })
          this.getShareInfoObj().then(res => {
            this.handleSaveImg()     //  画图的方法
          })
        })
      },
      //获取分享信息和处理图片，图片在取到的时候是不能直接画在图上的，必须要保存到本地然后再去画图
      getShareInfoObj() {
        return new Promise((resolve, reject) => {
          // getShareInfo().then(res => {
          let res = {
            qr_code: "https://sfile.tl100.com/ol_admin_test/product_qrcode/20.png",
          }
          console.time("eeee")
          Promise.all([
            this.downloadFiles(res.qr_code, "qr_code"),
            this.downloadFiles(this.data.avatarUrl, "avatarUrl"),
            this.downloadFiles(this.data.product_img, "product_img")
          ]).then(res => {
            resolve()
            console.timeEnd("eeee")
          }).catch((error) => {
            reject()
          })
        })
        // })
      },
      downloadFiles(_url, _param) {
        let that = this
        return new Promise((resolve, reject) => {
          wx.downloadFile({
            url: _url,    //  这个是头像保存到本地
            success: function (res) {
              // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
              if (res.statusCode === 200) {
                let data = {}
                data[_param] = res.tempFilePath
                that.setData(data)
                resolve()
              } else {
                reject()
              }
            },
            fail: function (avatar_err) {
              reject()
            }
          })
        })
      },
      handleSaveImg() {
        return new Promise((resolve, reject) => {
          let that = this;
          let screen_width = wx.getSystemInfoSync().windowWidth
          let screen_height = wx.getSystemInfoSync().windowHeight
    
          let unit = screen_width / 375;
    
          let path1 = "../../images/cs3.jpeg"    // 这张图片是背景图
          let avatarUrl = that.data.avatarUrl      // 处理过的头像
          let qr_code = that.data.qr_code      // 处理过的小程序码
          let nickName = that.data.nickName     // 昵称
          let context = wx.createCanvasContext('shareCanvas')     // 获取canvas上下文实例
          let r = unit * 30      // 头像的半径
          let qr_r = unit * 70    // 小程序码的半径
    
          //设置画板显示，才能开始绘图  初始化，让canvas组件显示出来
          that.setData({
            is_show_gongxi_shell: false,
            is_show_canvas: true,
          })
          context.drawImage(path1, 0, 0, screen_width, screen_height)    //  画背景图
          context.setFontSize(unit * 9)     // 字体大小
          context.setFillStyle("#ffffff")    //  颜色
          context.fillText(nickName, unit * 53, unit * 34)    // 写昵称和位置
          context.save();// 先保存一下
          context.beginPath(); //开始绘制
          context.arc(r / 2 + unit * 20, r / 2 + unit * 23, r / 2, 0, 2 * Math.PI); // 先画圆
          context.clip();
          context.drawImage(avatarUrl, unit * 20, unit * 23, r, r)    // 然后头像会在这个圆里面
          context.restore();
         
          context.drawImage(qr_code, unit * 152, unit * 390, qr_r, qr_r)       // 小程序码
          //把画板内容绘制成图片，并回调 画板图片路径
          context.draw(false, function () {
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: screen_width,
              height: screen_height,
              destWidth: unit * 1800, // 设置大一点清晰度会高
              destHeight: unit * 3200,
              canvasId: 'shareCanvas',
              success: function (res) {
                that.setData({
                  shareImgPath: res.tempFilePath,
                  is_show: false
                })
                if (!res.tempFilePath) {
                  wx.showModal({
                    title: '提示',
                    content: '图片绘制中，请稍后重试',
                    showCancel: false
                  })
                }
                resolve()
              },
              fail: function (err) {
                reject()
              }
            })
          })
         
        })
      },
      //  长按canvas图片的时候保存图片
      saveImageToPhotosAlbum() {
    
        //画板路径保存成功后，调用方法吧图片保存到用户相册
        wx.saveImageToPhotosAlbum({
          filePath: this.data.shareImgPath,
          //保存成功失败之后，都要隐藏画板，否则影响界面显示。
          success: (res) => {
    
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
            // completeShare().then(res => {
            //  
            // })
          },
          fail: (err) => {
            wx.showToast({
              title: '保存失败',
              icon: 'none',
              duration: 2000
            })
          }
        })
      },
    })