要實現的功能：

點選朋友圈按鈕彈出分享圖片：

點選儲存分享圖片儲存到手機
實現程式碼：
1.分享按鈕點選事件

/**
   * 分享
   */
  weixinShare:function(){
    var that = this;
    console.log(111);
    share.canvasImg((res)=>{
      console.log(222);
      that.setData({
        imagePath: res.tempFilePath,
        bgShare:false,
        left:43
      });
    });
  }
 

2.生成圖片

/**
   * 繪製分享圖片
   */
  canvasImg(callback){
    //小程式二維碼
    let promise1 = new Promise(function (resolve, reject) {
      /* 獲得要在畫布上繪製的圖片 */
      wx.getImageInfo({
        src: '/images/qrcode.png',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    //背景影象
    let promise2 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: '/images/bg1.png',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    //使用者頭像
    let promise3 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: '/images/logo.png',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    Promise.all(
      [promise1, promise2, promise3]
    ).then(res => {
      const ctx = wx.createCanvasContext('shareWeixin')
      ctx.setFillStyle('#FFFFFF');
      ctx.fillRect(0,0,500,600);
      ctx.drawImage('../../../' + res[0].path, 220, 321, 100, 100)
      ctx.drawImage('../../../' + res[1].path, 0, 0, 331, 252)
      ctx.drawImage('../../../' + res[2].path, 10, 275, 30, 30)
        // 繪製文字 位置自己計算 引數自己看文件
      // ctx.setTextAlign('left')  //  位置

      ctx.setFillStyle('#000000')   //  顏色
      ctx.setFontSize(15);
      ctx.fillText('海賊王',54,300);
      ctx.setFontSize(22)           //  字號
      ctx.fillText('生活小記者', 10, 341)//  內容  不會自己換行 需手動換行
      ctx.fillText('快來關注校園時訊', 10, 377) //  內容
      ctx.setFillStyle('#ccc') 
      ctx.setFontSize(15)
      ctx.fillText('長按識別掃碼檢視詳情',10,410);
      /* 繪製 */
      ctx.stroke()
      ctx.draw(true,setTimeout(function(){
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 600,
          height: 800,
          destWidth: 600,
          destHeight: 800,
          canvasId: 'shareWeixin',
          success: function (res) {
            // wx.saveImageToPhotosAlbum({
            //   filePath: res.tempFilePath,
            // })
            callback && callback(res)
          },
          fail: function (res) {
            console.log(res)
          }
        })
      },500))
    })
  }
 

3.儲存到手機

// 儲存到手機圖片
  saveToPhone:function(){
    var that = this;
    // console.log(that.data.imagePath);
    // 儲存到本地
    wx.downloadFile({
      url: that.data.imagePath,
      success: function (res) {
        tempFilePaths = res.tempFilePath
        wx.saveFile({
          tempFilePath: tempFilePaths,
          success(res) {
            savedFilePath = res.savedFilePath
            // console.log('儲存路徑');
            // console.log(savedFilePath)
            // 儲存到手機
            wx.saveImageToPhotosAlbum({
              filePath: savedFilePath,
              success(res) {
                console.log(res)
                wx.showToast({
                  title: '成功',
                  icon: 'success',
                  duration: 2000
                })
              },
              fail(res) {
                console.log('儲存到手機失敗');
                console.log(res)
              }
            })
          }
        })        
      }, fail: function (res) {
        console.log('儲存到本地失敗');
        console.log(res)
      }
    })
  }
 

5.前端程式碼

<!-- 分享圖片 -->
<view class='bg-shade' hidden="{{bgShare}}"></view> 
<canvas style="width: 600rpx; height: 800rpx;left:{{left}}px;" canvas-id="shareWeixin" class='share-bg'></canvas>
<view hidden='{{bgShare}}' class='preview'>
  <image src='{{imagePath}}' class='shareImg'></image> 
  <button type='primary' size='default' bindtap='saveToPhone'>儲存分享圖</button>
</view> 

總結：

• 畫圖的時候要延遲一定事件否則會生成失敗，生成一張同樣大小的空白圖片
• 下載圖片的時候不要直接用臨時的圖片連結，可以先下載本地獲得連結再儲存
• 使用canvas繪圖的時候不能隱藏canvas,否則會報錯，所以可以設定左右上下距離讓他定位到螢幕外