下面這個圖片就是通過圖片和文字等內容合成的一張帶有微信小程式二維碼的圖片，在小程式內部長按可以識別出來：

基本思路是先將內容用canvas排好版，然後把該canvas轉化成圖片；圖片利用wx.previewImage進行展示，才能識別圖片中的微信小程式二維碼，這是博主目前知道唯一一種識別二維碼的手段。

1.合成canvas
wxml:

<canvas canvas-id="mycanvas" class='canvas' id="mycanvas" wx:if="{{isShowCav}}" style='border:1px solid #000000'/>

wxss

.canvas
 
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 748rpx;
  height: 1336rpx;
}

js

  canvas:function(object){
    let _this = this;
    let realWidth, realHeight;
    //建立節點選擇器
    var query = wx.createSelectorQuery();
    //選擇id
    query.select('#mycanvas').boundingClientRect()
    query.exec(function
 
 (res) {
      //res就是 該元素的資訊 陣列
      realWidth = res[0].width;
      realHeight = res[0].height;
      console.log('realHeight', realHeight);
      console.log('realWidth', realWidth);
      const ctx = wx.createCanvasContext('mycanvas');
      ctx.drawImage("../../images/ctx-bg.jpg", 0, 0, realWidth, realHeight);
      ctx.drawImage(_this.data.canvasUserPic, (realWidth * 0.099
 
), (realHeight * 0.052), (realWidth * 0.091), (realWidth * 0.091));
      ctx.setFontSize(12);
      ctx.setFillStyle("#a38874");
      ctx.fillText(object.date, (realWidth * 0.201), (realHeight * 0.076));
      ctx.setFontSize(14);
      ctx.setFillStyle("#a38874");
      ctx.fillText("農曆" + object.lunar, (realWidth * 0.201), (realHeight * 0.099));
      ctx.drawImage("../../images/swiper-bg.png", (realWidth * 0.099), (realHeight * 0.112), (realWidth * 0.8), (realHeight * 0.60));
      ctx.drawImage(_this.data.canvasShowImg, (realWidth * 0.099), (realHeight * 0.112), (realWidth * 0.8), (realHeight * 0.30));
      ctx.drawImage("../../images/swiper-detail.png", (realWidth * 0.099), (realHeight * 0.395), (realWidth * 0.8), (realHeight * 0.03));
      ctx.setFontSize(16);
      ctx.setFillStyle("#8d7665");

      ctx.setTextAlign('center')
      ctx.fillText(object.title1, realWidth/2, _this.calculateWH(2, 620, realWidth, realHeight));
      ctx.fillText(object.title2, realWidth / 2, _this.calculateWH(2, 666, realWidth, realHeight));

      ctx.drawImage("../../images/swiper-line.png", (realWidth - realWidth * 0.71)/2, (realHeight * 0.528), (realWidth * 0.71), (realHeight * 0.0195));
      ctx.drawImage("../../images/luckpic.png", _this.calculateWH(1, 267, realWidth, realHeight), _this.calculateWH(2, 763, realWidth, realHeight), _this.calculateWH(1, 204, realWidth, realHeight), _this.calculateWH(2, 60, realWidth, realHeight));
      ctx.setFontSize(12);
      ctx.fillText(object.luck_title, realWidth / 2, _this.calculateWH(2, 880, realWidth, realHeight));
      ctx.drawImage("../../images/code.jpg", _this.calculateWH(1, 229, realWidth, realHeight), _this.calculateWH(2, 989, realWidth, realHeight), _this.calculateWH(1, 292, realWidth, realHeight), _this.calculateWH(1, 292, realWidth, realHeight))
      ctx.draw();

      setTimeout(function () {
        wx.canvasToTempFilePath({
          canvasId: 'mycanvas',
          success: function (res) {
            var tempFilePath = res.tempFilePath;
            _this.setData({
              canvasUrl: tempFilePath
            })
            if (tempFilePath !== '') {
              _this.setData({
                isShowCav: false
              });
              wx.hideLoading();
              wx.previewImage({
                current: _this.data.canvasUrl, // 當前顯示圖片的http連結  
                urls: [_this.data.canvasUrl], // 需要預覽的圖片http連結列表  
              })
            }
          },
          fail: function (res) {
            console.log(res);
          }
        });
      }, 500);
    })
  },

出現問題：
1.伺服器上傳送過來的圖片路徑直接插進ctx.drawImage 上，手機上顯示不了。
解決方案：利用wx.downloadFile 將圖片下載再儲存好這個新圖片路徑，然後放到ctx.drawImage 上

 //下載圖片
  onShow1: function (object) {
    let _this = this;
    _this.setData({
      isShowCav: true
    })
    wx.downloadFile({
      url: object.avatarurl,
      success: function (sres) {
        _this.setData({
          canvasUserPic: sres.tempFilePath
        });
        wx.downloadFile({
          url: object.show_img,
          success: function (sres1) {
            _this.setData({
              canvasShowImg: sres1.tempFilePath
            });
            _this.canvas(object);
          }
        })
      }
    })
  },  

2.canvas出現在手機上的頂層，不管z-index設定多少層都沒有用。
解決方案：利用wx:if="{{isShowCav}}" 將canvas臨時隱藏，要用到的時候再顯示。不用再隱藏掉。

3.canvas裡面的文字如何居中，官方文件雖然提供了案例，但是沒有說具體是怎麼用的。
解決方案：

const ctx = wx.createCanvasContext('myCanvas')

ctx.setStrokeStyle('red')
ctx.moveTo(150, 20)
ctx.lineTo(150, 170)
ctx.stroke()

ctx.setFontSize(15)
ctx.setTextAlign('left')
ctx.fillText('textAlign=left', 150, 60)

ctx.setTextAlign('center')
ctx.fillText('textAlign=center', 150, 80)

ctx.setTextAlign('right')
ctx.fillText('textAlign=right', 150, 100)

ctx.draw()

這裡面的居中不是我們常用的css那種居中；而是忽略了文字寬高的意思，所以你還是要給文字設定一個（x,y）座標，只要將這個座標寫上canvas寬度的一半，它就可以實現居中了。

小程式的坑還是不好踩啊，一肛上半天時間就沒了！