微信小程式自帶的分享功能不支援分享到朋友圈，那我們的替代方法就是生成一張帶小程式二維碼的圖片，在做這個時，剛開始寫靜態用的本地圖片最後生成的圖片都挺好的，但是後臺將圖片換成網路地址之後就出現了圖片繪製不出來的情況

解決辦法就是先用wx.getImageInfo({})先獲取網路圖片資訊，在它的成功獲取的回撥函式裡面進行canvas繪製網路圖片，一個canvas裡面要繪製多張網路圖片時，需要在繪製完一張圖片之後呼叫下一張圖片的繪製函式，不然容易出現缺失；同樣文字的繪製需要在在繪製完網路背景圖片之後呼叫。

在結構的按鈕繫結shareImg事件：

<button bindtap='shareImg' class='bg-yellow color-000 text-center pull-right'>儲存朋友圈海報</button>
 

給大家分享一下我的專案例項的js的主要部分

Page({
  /**
  * 頁面的初始資料
  */
  data: {
    bgUrl: 'https://....../images/shareBg.jpg',//背景圖片網路地址
    title: '',
    qrcodeUrl: 'https://....../images/qrcode.png',//二維碼圖片網路地址
    HandleUrl: 'https://....../images/zw.png',//手指圖片網路地址
  },

  // 第一步繪製背景圖片
  setBg: function (context) {
    var that = this;
    var path = that.data.bgUrl
    wx.getImageInfo({
      src: path,
      success: function (res) {
        var path = res.path;
        context.drawImage(path, 0, 0, 375, 602);
        //繪製完背景圖之後繪製二維碼
        that.setQrcode(context);
        //同時繪製標題（繪製文字）
        that.setTitle(context);
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },

  //繪製代言標題
  setTitle: function (context) {
    var title = this.data.title;
    context.setFontSize(15);
    context.setTextAlign('center');
    context.setFillStyle('#f56259');
    context.fillText(title, 185, 322.5)
  },

  //第二步繪製二維碼圖片
  setQrcode: function (context) {
    var that = this;
    var qrcodeUrl = this.data.qrcodeUrl;
    wx.getImageInfo({
      src: qrcodeUrl,
      success: function (res) {
        var path = res.data;
        context.drawImage(qrcodeUrl, 400.5, 80, 120, 120);
        context.save();
        context.restore();
        context.stroke();
        //繪製完二維碼之後繪製手指
        that.setHandle(context)
      },
      fail: function (res) {
        console.log(res);
      }
    })

  },
  //第三個繪製指紋圖片
  setHandle: function (context) {
    var that = this;
    var HandleUrl = this.data.HandleUrl;
    wx.getImageInfo({
      src: HandleUrl,
      success: function (res) {
        var path = res.path;
        context.drawImage(path, 230, 432.5, 80, 80);
        context.save();
        context.restore();
        context.stroke();
        //繪製的最後一張圖片繪製完之後回撥生成圖片
        context.draw(false, function (e) {
          console.log("繪製完成之後回撥")
          wx.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success: function (res) {
              var tempFilePath = res.tempFilePath;
              console.log(tempFilePath);
              that.setData({
                newImage: tempFilePath,
              })
              wx.hideToast()
              //儲存圖片到相簿
              wx.saveImageToPhotosAlbum({
                filePath: tempFilePath,
                success(res) {
                  console.log(res)
                  wx.showModal({
                    title: '提示',
                    content: '將圖片分享到朋友圈，讓更多朋友來代言',
                    success: function (res) {
                      if (res.confirm) {

                      } else if (res.cancel) {
                        console.log('使用者點選取消')
                      }
                    }
                  })
                },
                fail(res) {
                  console.log(res)
                }
              })
            },
            fail: function (res) {
              console.log(res);
            }
          });
        })

      },
      fail: function (res) {
        console.log(res);
      }
    })
  },



  //canvas繪製圖片
  createNewImg: function (data) {
    var that = this;
    var path = that.data.bgUrl;
    console.log(path)
    var context = wx.createCanvasContext('mycanvas');
    this.setBg(context);//繪製背景
  },


  //生成朋友圈分享圖
  shareImg: function () {
    var that = this;
    wx.showToast({
      title: '生成中...',
      icon: 'loading',
      duration: 30000
    });

    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              // 使用者已經同意小程式使用儲存到相簿功能，後續呼叫 wx.saveImageToPhotosAlbum 介面不會彈窗詢問
              wx.saveImageToPhotosAlbum()
              console.log("open success")
            }
          })
        } else {
          console.log("使用者已經同意小程式使用儲存到相簿功能")
        }
      },
      fail(res) {
        console.log("open fail")
      }
    })
    var data = that.data;
    //生成新圖片
    that.createNewImg(data);
  },
})