在小程式中，會有這樣一種需求，儲存某一個頁面並將其分享到朋友圈。一般的做法是：將這個頁面用canvas繪製出來，通過wx.canvasToTempFilePath，把當前畫布指定區域的內容匯出生成指定大小的圖片。然後再通過wx.saveImageToPhotosAlbum，儲存圖片到系統相簿。由使用者發朋友圈，在相簿中選擇圖片即可。

程式碼展示部分，只是個邏輯，直接貼上複製不可行。

canvas.wxml

<view wx:if="{{showShare}}" class='share'>
<!-- canvas 需要和showShare儲存同步顯示和隱藏-->
  <canvas canvas-id='myCanvas' class='canvas'></canvas>
  <!-- /canvas -->
  <view class='share-content'>
    <image class='share-img' src='{{targetSharePath}}'></image>
    <button bindtap='saveImageTap' class='share-btn'>儲存</button>
  </view>
  <view class='share-close' bindtap='closeShare'>
    <image class='close-img' src='/image/close.png'></image>
  </view>
</view>
 

canvas.js

Page({

  data: {
    
    circle:'',
    canvasHeight:0,
    imageWidth: 0,
    imageHeight: 0,
    spreadBgUrl:'',
    targetSharePath: null,
    //彈窗馬上去分享
    isShow: false,
    //彈窗儲存圖片
    showShare:false,
    //彈窗圖片儲存成功
    showSuccess:false
  },

  Popup() {
    var that = this;
    that.setData({
      isShow: !this.data.isShow,
    })
  },

  goToNO:function(){
    wx.navigateTo({
      url: '../advise/advise',
    })
  },
  goToSave:function(){
    var that = this;
    that.setData({
      isShow: !that.data.isShow,
      showShare: !that.data.showShare
    })
    // 下載圖片，因為下載圖片是非同步操作，所以必須在回撥裡處理圖片生成的動作
    wx.downloadFile({
      url: '',
      success: function (res) {
        console.log('downloadFile 下載背景圖片成功,path=' + res.tempFilePath);
        that.setData({
          spreadBgUrl: res.tempFilePath
        });
        that.drawImage();
      },
      fail: function (e) {
        console.log(e);
        wx.showToast({
          title: '下載圖片出錯',
          icon: 'none',
          duration: 2000
        })
      }
    });
  },
  closeShare:function(){
    this.setData({
      showShare: !this.data.showShare
    })
  },
  cancalSuccess:function(){
    this.setData({
      showSuccess:false
    })
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    
  },
  
  //繪製圓角矩形
  roundRect(ctx, x, y, w, h, r) {
    ctx.save();
    if (w < 2 * r) {
      r = w / 2;
    }
    if (h < 2 * r) {
      r = h / 2;
    }
    ctx.beginPath();
    ctx.setStrokeStyle('#ffffff');
    ctx.setLineWidth(1);
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.stroke();
    ctx.closePath();
    ctx.setFillStyle('#ffffff')
    ctx.fill();
  },

  //開始繪製圖片
  drawImage:function(){
    var that = this;
    console.log('in drawImage');
    const ctx = wx.createCanvasContext('myCanvas', this);
    var bgPath = that.data.spreadBgUrl;
    console.log(bgPath);
    var icon = '/image/headCoach.png';
    var share = '/image/share.png';
    var code = '/image/code.jpg'
    ctx.setFillStyle('#FFFFFF');
    ctx.fillRect(0, 0, 375, 603);
    
    //繪製背景圖片
    ctx.drawImage(bgPath, 0, 0, 375,603);
    //繪製內容
    ctx.setFillStyle('#31624d');
    ctx.setFontSize(22);
    ctx.fillText('哈哈哈',30,63);
    ctx.fillText('哈哈哈',30,103);
    ctx.fillText('so easy~~~', 30, 133);
    ctx.setFontSize(12);
    ctx.fillText('啊哈哈哈哈哈',30,173);
    
    that.roundRect(ctx, 20, 402, 335, 120, 10);
    ctx.setFillStyle('#000000');
    ctx.setFontSize(16);
    ctx.fillText('啊哈哈哈哈哈',28,430);
    ctx.fillText('啊哈哈哈哈哈', 28, 455);
    ctx.drawImage(share,28,480,140,21);
    ctx.drawImage(code,250,410,100,100);
    
    ctx.draw(false,function(){
      console.log("in draw,showShare=" + that.data.showShare + ",isShow=" + that.data.isShow);
      that.saveCanvasImage();
    });
    
    console.log("after draw,showShare=" + that.data.showShare + ",isShow=" + that.data.isShow);
  },

  //轉換成圖片
  saveCanvasImage:function(){
    console.log("in saveCanvasImage");
    var that = this;
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success:function(res){
        console.log("in saveCanvasImage="+res.tempFilePath);
        that.setData({
          targetSharePath: res.tempFilePath,
        })
      }
    }, this)
  },

  //儲存到相簿
  saveImageTap: function () {
    var that = this;
    that.requestAlbumScope();
  },

  //檢測許可權
  requestAlbumScope:function(){
    var that = this;
    wx.getSetting({
      success:function(res){
        if (res.authSetting['scope.writePhotosAlbum']){
          that.saveImageToPhotosAlbum();
        }else{
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success(res){
              that.saveImageToPhotosAlbum();
            },
            fail(){
              wx.showModal({
                title: '提示',
                content: '你需要授權才能儲存圖片到相簿',
                success: function (res) {
                  if (res.confirm) {
                    wx.openSetting({
                      success: function (res) {
                        if (res.authSetting['scope.writePhotosAlbum']) {
                          that.saveImageToPhotosAlbum();
                        } else {
                          //使用者未同意儲存圖片許可權
                        }
                      },
                      fail: function () {
                        //使用者未同意儲存圖片許可權
                      }
                    })
                  }
                }
              })
            }
          })
        }
      }
    })
  },

  saveImageToPhotosAlbum:function(){
    var that = this;
    wx.saveImageToPhotosAlbum({
      filePath: that.data.targetSharePath,
      success:function(){
        that.setData({
          showShare:false,
          showSuccess:true
        })
      }
    })
  },

 


})