WeChatアプレットはどのようにcanvasを使って多情報画像の綴り付けを行いますか?

 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
            })
          }
        })
      },
    })