微信小程序利用canvas合成图片，并下载图片(邀请好友功能)

这个需求是邀请好友功能，可以下载当前的海报图，分享给好友，好友通过扫描二维码跳转至小程序。
如果整张图是不变的，就在本地项目中，那就可以直接下载，不用做任何处理，例如：

    wx.saveImageToPhotosAlbum({
      filePath: /pages/imgs/qrcode_bg.png，//这里是要下载图片的地址
      success(res) {
        console.log(res)
      }
    })

但需求是邀请好友，肯定是根据当前登录者的信息去生成二维码，不然邀请到的好友怎么绑定到该用户下，所以会将二维码嵌入背景海报中，合成一张图后，生成一个临时地址，再去下载图片，代码如下：

html部分：

<view class="borrow-poster-page">
  <view class="image-box">
    <canvas type="2d" id="myCanvas" style="width:100%;height:1060rpx;"></canvas>
    <view class="footButton">
      <button style="width:160px;height:40px;" class="button-share" open-type="share">分享微信好友</button>
      <button style="width:160px;height:40px;" class="button-share" bindtap="saveImg">保存图片</button>
    </view>
  </view>
</view>

js部分：

//生成二维码的js库，下载地址：( https://pan.baidu.com/s/1iEHNl-_F8kGwRDV-enMz5Q 密码: c4hm）
import Qr from "../../../utils/wxqrcode.js"
Page({
  data: {
    img: '' // 合成后图片的临时路径
  },
  getQRcode() {
    let codeUrl = Qr.createQrCodeImg('https://www.baidu.com/')
    this.toQrcode(codeUrl)
  },
  toQrcode(codeUrl) {
    var self = this;
    var imgsrcArray = ['/pages/component/photo/borrow_qrcode_bg.png', codeUrl]; //第一个路径为海报图的本地路径，codeUrl为生成的二维码路径
    wx.createSelectorQuery()
      .select('#myCanvas')
      .fields({
        node: true,
        size: true,
      })
      .exec(res => {
        const canvas = res[0].node
        var ctx = canvas.getContext('2d');
        canvas.width = 750;
        canvas.height = 1100;
        var imglen = imgsrcArray.length;
        var drawimg = (function f(n) {
          if (n < imglen) {
            var img = canvas.createImage()
            img.crossOrigin = 'Anonymous'; //解决跨域问题
            img.onload = function () {
              ctx.save();
              if (n == 0) {
                ctx.drawImage(img, 0, 0, 750, 1210);
              } else {
                ctx.drawImage(img, 220, 500, 300, 300);
              }
              f(n + 1);
            };
            img.src = imgsrcArray[n];
          } else {
            **//以下代码是在页面添加文字，修改文字样式，根据业务删减**
            // let userData = wx.getStorageSync('userData') || {};
            // let text = userData.companyName || 'wwwwwwwwwwww';
            // let text2 = '';
            // const MAXLEN = 16;
            // if (text.length > MAXLEN) {
            //   text2 = text.slice(MAXLEN);
            //   text = text.substr(0, MAXLEN);
            // }
            // ctx.font = '32px bold 黑体';
            // ctx.fillStyle = '#1B44D5';
            // ctx.textAlign = 'center';
            // ctx.textBaseline = 'middle';
            // ctx.fillText(text, 375, 180);
            // text2 && ctx.fillText(text2, 375, 220);

         **//方法一：这种打印出的img是一个base64格式，直接下载是不行的**
            // let downloadUrl = canvas.toDataURL('image/jpeg');
            // self.setData({
            //   img: downloadUrl
            // })
            
          **//方法二：根据此方法获取合成后图片的临时路径**
            wx.canvasToTempFilePath({
              canvasId: 'myCanvas',
              canvas: canvas,
              success: function (res) {
                let tempFilePath = res.tempFilePath;
                self.setData({
                  img: tempFilePath
                })
              },
              fail: function (res) {
                console.log(res);
              }
            }, this);
          }
        })(0);
      })
  },
 //下载图片
  saveImg() {
  //调用微信内部方法，下载图片
    wx.saveImageToPhotosAlbum({
      filePath: this.data.img,
      success(res) {
        console.log(res)
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getQRcode()
  },

最终效果图：