1.画布绘制背景图，drawImage方法的argument.length = 9
[0]:url地址
[1]:裁剪区域左上方X轴坐标
[2]:裁剪区域左上方Y轴坐标
[3]:整个裁剪区域的宽度
[4]:整个裁剪区域的高度
注：官方文档对这个方法的参数说明，很绕，确实是我语文门卫教的。裁剪区域是相对于图片本身的尺寸为参照。而不是画布可视区域。
[5.6.7.8]就是在画布上要绘制的区域坐标，和区域尺寸。

2.小程序码动态生成，移步官方文档，这里是后台去生成，前端不做处理，因为生成的接口需要传app secret，这是很敏感的，不能在前台用。

3.海报合成，小程序码返回的必须是http网络地址，base64亲测不行，大坑！直接绘制的话本地调试是可以的，但是手机上就是空白的。downloadfile方法调用的话，会报域名不在白名单（特么base64有个毛的域名，坑在这，我不晓得怎么解决）
所以，接口返回http网络地址，再通过downloadfile方法，拿到res.tempFilePath，用这个临时地址在画布上绘制，就ok了。

4.downloadfile 域名白名单，设置了之后，去详情-配置 里面的域名配置刷新一下。*（我太蠢了）

getQrcode() {
    // 接口返回图片
    return app.$request.teamQr()
  },
  getImage() {
    let _this = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths;
        
        _this.setData({
          bg: tempFilePaths[0]
        })
      }
    })
  },
  onClose() {
    this.setData({
      posterShow: false
    })
  },
  saveImage: async function() {
    wx.showLoading({
      title: '海报生成中...'
    });
    let self = this;
    const ctx = wx.createCanvasContext('myCanvas');
    ctx.setFillStyle('white')
    ctx.fillRect(0, 0, 276, 444)
    console.log(self.data.bg);
    let post = self.data.bg;
    let { width, height } = await self.getSize(post);
    let actWidth =  height*(276/355);
    let coord = [
      (width - actWidth)/2,
      0,
      actWidth,
      height,
    ];
    console.log(self.data.qrcodeUrl);
    wx.downloadFile({
      url: self.data.qrcodeUrl, //个人logo
      success: function(res) {
        let logo = res.tempFilePath;
        wx.hideLoading();
        // ctx.drawImage(post, 540,0,839,1080,0,0,276,355);
        ctx.drawImage(post, coord[0], coord[1], coord[2], coord[3],0,0,276,355);
        ctx.fillStyle = "#fff";
        ctx.fillRect(95, 306, 86, 86); 
        ctx.drawImage(logo, 97, 308, 82, 82);
        ctx.setFontSize(12)
        ctx.setFillStyle('#333');
        ctx.setFontSize(12)
        ctx.setFillStyle('#fb5e2c');
        //长按识别打开小程序文字位置
        ctx.setFontSize(12)
        ctx.setFillStyle('#333');
        ctx.fillText('长按识别打开小程序', (276 - ctx.measureText('长按识别打开小程序').width) / 2, 410)
        ctx.draw(false, function(e) {
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 375,
            height: 417,
            quality: 1,
            canvasId: 'myCanvas',
            success: function(respon) {
              ctx.setFillStyle('white')
              self.setData({
                postImage: respon.tempFilePath,
                posterShow: true
              })
            },
            fail: function(res) {
              wx.showToast({
                title: 'canvasToTempFilePath---fail',
                icon: 'none'
              })
            }
          });
        });
      },
      fail: function(res) {
        console.log(res);
        wx.showToast({
          title: '二维码下载失败,请重新生成1',
          icon: 'none'
        })
      }
    });
  },
  // 获取背景图片尺寸
  getSize(url) {
    return new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: url,
        success (res) {
          console.log(res.width)
          console.log(res.height)
          resolve(res)
        }
      })
    })
  },
// 2、点击保存到相册时做授权处理
  save: function() {
    var _this = this;
    wx.getSetting({
      success(res) {
        console.log(res)
        if (res.authSetting['scope.writePhotosAlbum'] != undefined && res.authSetting['scope.writePhotosAlbum'] != true) {
          wx.showModal({
            title: '提示',
            content: '您未授权保存到相册,确认授权?',
            success: function (res) {
              if (res.confirm) {
                wx.openSetting({
                  success: function (res) {
                    if (res.authSetting["scope.writePhotosAlbum"] == true) {
                    } else {
                    }
                  }
                })
              }
            }
          })
        } else {
          wx.saveImageToPhotosAlbum({
            filePath: _this.data.postImage,
            success(res) {
              console.log('保存成功---ok')
              wx.showToast({
                title: '保存成功',
                icon: 'none'
              });
              wx.navigateBack({
                delta: 1
              })
            }
          })
        }
      },
      fail: function(e) {
        console.log(999)
      }
    });
  
  }