yii2 php 生成小程序分享海报的两种方法

前段时间做了个小程序-爱小环保，现在要给它加一个生成海报分享朋友圈的功能。

先简单介绍下这个小程序，主要是号召大家随手捡垃圾，如果你在马路上见到别人随手丢的垃圾，可以将它拍下来，然后丢到垃圾桶，拍下来的照片可以发布到这个小程序上，一是记录一下自己对干净家园的行动，二是希望更多看到的人约束自己，不要随手丢垃圾。

就当是打个广告了，现在进入正题，研究后发现要实现小程序生成海报基本有两种方法
1、在小程序端用canvas画图生成
2、在后端生成传到小程序端

下面就讲一下这两种方法

一、canvas实现

只要有了素材，便可以在canvas上绘制出来了，小程序二维码素材，一般也有两种，一是特定页面(可能带参数)的二维码，二是小程序主页

1、跳转小程序主页

如果希望用户识别小程序码后直接跳到小程序主页，那就不用调用接口生成特定二维码，直接下载小程序码作为素材就可以，这时候将小程序码放到static/images文件夹里就可以直接绘制了，代码如下：

 //分享
  share: function(e){
   
    wx.showLoading({
      title: '正在生成图片...',
      mask: true,
    })
    var that = this
    var index = e.target.dataset.id;
    that.setData({
      index:index
    })
    wx.getImageInfo({
      src: that.data.litters[index].picurl,//这里是我获取的用户上传的垃圾图片
      success:function(res){
   
        that.drawSharePic(res.path)//实际绘图函数
      }
    })
  }
  //生成分享图片
  drawSharePic:function(litterPath){
       
    const canvasCtx = wx.createCanvasContext('shareCanvas');//canvasid
    //绘制背景
    canvasCtx.setFillStyle('white');
    canvasCtx.fillRect(0, 0, 240, 360);
    canvasCtx.setFontSize(13);
    canvasCtx.setFillStyle('#333333');
    const text = "我在"+this.data.litters[this.data.index].address+"捡到了垃圾"
    var len = text.length
    if(len<=18){
      canvasCtx.fillText(text, 6, 20);
    }else{
      canvasCtx.fillText(text.substr(0,18),6,20)
      canvasCtx.fillText(text.substr(18, len-18), 6, 40)
    }
    const text1 = "我们的家园在我的努力下干净了一点点"
    const text2 = "识别二维码去守卫干净家园"

    canvasCtx.drawImage(litterPath, 70, 50, 100, 145);
    canvasCtx.fillText(text1, 10, 230);

    canvasCtx.drawImage('/static/images/qrcode.jpg', 90, 250, 60, 60);//我的小程序码
    canvasCtx.setFontSize(9);
    canvasCtx.fillText(text2, 65, 330);
    canvasCtx.draw();
    wx.hideLoading()  
  },
  //保存分享图片
  saveSharePic:function(){
   
    var that = this;
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 240,
      height: 360,
      destWidth: 240,
      destHeight: 360,
      canvasId: 'shareCanvas',
      success: function (res) {
   
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showModal({
              title: '存图成功',
              content: '图片成功保存到相册了，可以去发朋友圈啦',
              showCancel: false,
              confirmText: '好哒',
              co