思路

首先準備好一張圖片，本地圖片和網路圖片均可作為你的背景圖小程式目前不支援截圖，這裡講解本地圖片。
會用到 wx.createCanvasContext(#獲取畫布的id)、
drawImage(#將圖片畫到背景圖上)、
setFillStyle(#設定字型的顏色)、
setFontSize(#字型大小)、
fillText(#設定你所需的文字)、
draw(#儲存畫好的圖片)、
wx.canvasToTempFilePath(#儲存圖片路徑)、 
wx.saveImageToPhotosAlbum(#儲存圖片到手機相簿)
詳細的請移步微信小程式官方文件

第一步

wxml 準備畫布

<canvas class='ce' canvas-id="myCanvas"  >先設定畫布樣式展示出來</canvas>
<button  bindtap="conceals">分享圖</button>

第二步

js 進行點選觸發
解釋：this.data.qr 是data{}裡面的資料

 conceals: function () {
     //獲取畫布
    const cts = wx.createCanvasContext('myCanvas')
    cts.drawImage(this.data.back, 5
 
, 5, 600, 450)
    cts.setFontSize(14)
    cts.setFillStyle("#606D80")
    cts.fillText('周圍物體'+':'+this.data.datas[0].tag_name,50,300)
    cts.drawImage(this.data.qr, 200, 400, 50, 50);
    cts.drawImage(this.data.src, 50, 50, 170, 200);
    // 畫圖完成進行儲存圖片路徑
    var that = this
    cts.draw(false,function(){
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas'
 
,
        success: function (res) {
            console.log(res.tempFilePath)
          if (!res.tempFilePath){
            wx.showModal({
              title: '提示',
              content: '圖片繪製中，請稍後重試',
              showCancel: false
            })
            }
          //圖片路徑儲存後在下載到本地
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success:function(res){
              wx.showToast({
                title: '成功',
                icon: 'success',
                duration: 2000
              })

              setTimeout(function () {
                console.log(res)
                wx.hideLoading()
              }, 3000)

            },
            fail:function(err){
              console.log(err)
              wx.hideLoading()
            }
          })
        }
      }, this)
    })
  },

fileText繪製文字自動換行

即粘即用

    var text = "這是要繪製的文字"//這是要繪製的文字
    var chr = text.split("")
    console.log(chr)
    var temp = ""
    var row = []
    for (var a = 0; a < chr.length; a++) {
      if (cts.measureText(temp).width < 250) {
        temp += chr[a];
      }
      else {
        a--; //這裡添加了a-- 是為了防止字元丟失，
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp); 
    //如果陣列長度大於2 則擷取前兩個
    //2取前兩行3取前三行
    if (row.length > 2) {
      var rowCut = row.slice(0, 3);
      var rowPart = rowCut[1];
      var test = "";
      var empty = [];
      for (var a = 0; a < rowPart.length; a++) {
        if (cts.measureText(test).width < 220) {
          test += rowPart[a];
        }
        else {
          break;
        }
      }
      empty.push(test);
      var group = empty[0] + "..."//這裡只顯示兩行，超出的用...表示
      rowCut.splice(2, 2, group);//1,1在第二行開始有省略號。2,2在第三行有省略號
      row = rowCut;
    }
    for (var b = 0; b < row.length; b++) {
      cts.fillText(row[b], 5, 330 + b * 30);
    }

詳細版