wxml

<view class="bg">
  <canvas canvas-id="shareCanvas" class="canvas"></canvas> 
  <image src="{{img}}" class="img" bindtap="previewImg"></image>
</view>

<view class="canvas-box">
  <canvas  hidden="{{canvasHidden}}" style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas"/>
</view>
 

wxss

.bg {
  width: 100%;
  height: 100%;
  background: red;
}
.canvas {
  width: 100%;
  height: 100%;
}

 .canvas-box{position: fixed;top:999999rpx;left: 0} 


.img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

js

var QR = require("../../utils/qrcode.js"); // qrcode.js為生成二維碼外掛
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    imgUrl: "..............", //圖片連結
    codeUrl: 'http://www.baidu.com', // 二維碼內容用於生成二維碼
    temporarycodeUrl: '', // 二維碼臨時圖片路徑
    img: '' // 合成後圖片路徑
  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
      // 繪製背景海報到canvas
      var postersize = this.setCanvasSize(750);//動態設定畫布大小
      console.log(postersize)
      const ctx = wx.createCanvasContext('shareCanvas')
      ctx.drawImage(this.data.imgUrl, 0, 0, postersize.w, postersize.h)
      ctx.draw()
      // 繪製二維碼到canvas
      var codesize = this.setCanvasSize(686);//動態設定畫布大小
      console.log(codesize)
      var initUrl = this.data.codeUrl;
      // 在另一個canvas上生成二維碼
      this.createQrCode(initUrl, "mycanvas", codesize.w, codesize.h);
      var code_url = ''
      setTimeout(() => { 
        // code_url = this.canvasToTempImage(); 
          var that = this;
          //獲取臨時快取code照片路徑，存入data中
          wx.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success: function (res) {
              var tempFilePath = res.tempFilePath;
              console.log(tempFilePath)
              that.setData({
                temporarycodeUrl: tempFilePath
              })
              console.log(that.data.temporarycodeUrl)
              //將臨時code圖片路徑繪製到海報canvas中
              var res = wx.getSystemInfoSync();
              var scale = 750 / 180;
              var width = res.windowWidth / scale;
              var height = width
              var leftscale = 750 / 480; // 180為left
              var left = res.windowWidth / leftscale;
              var topscale = 750 / 880; // 180為top
              var top = res.windowWidth / topscale;
              ctx.drawImage(that.data.temporarycodeUrl, left, top, width, height)
              ctx.draw(that)

              setTimeout(() => {
                // code_url = this.canvasToTempImage(); 
                //獲取臨時快取合成照片路徑，存入data中
                wx.canvasToTempFilePath({
                  canvasId: 'shareCanvas',
                  success: function (res) {
                    var tempFilePath = res.tempFilePath;
                    that.setData({
                      img: tempFilePath
                    })
                    console.log(tempFilePath)
                  },
                  fail: function (res) {
                    console.log(res);
                  }
                });
              }, 1000);
            },
            fail: function (res) {
              console.log(res);
            }
          });
      }, 1000);
  },

  //點選圖片進行預覽，長按儲存分享圖片
  previewImg: function (e) {
    var img = this.data.img;
    console.log(img);
    wx.previewImage({
      current: img, // 當前顯示圖片的http連結
      urls: [img] // 需要預覽的圖片http連結列表
    })
  },

  createQrCode: function (url, canvasId, cavW, cavH, left, top) {
    //呼叫外掛中的draw方法，繪製二維碼圖片
    QR.api.draw(url, canvasId, cavW, cavH, left, top);
    // setTimeout(() => { this.canvasToTempImage(); }, 1000);
  },

  //適配不同螢幕大小的canvas
  setCanvasSize: function (width) {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / width;//不同螢幕下canvas的適配比例；設計稿是750寬
      // var scale = 1
      var width = res.windowWidth / scale;
      var height = res.windowHeight / scale;;
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("獲取裝置資訊失敗" + e);
    }
    return size;
  },

})
 

注： 網路圖片通過drawImage繪製到canvas在開發者工具上顯示正常，但在手機上無法正常繪製，需要使用wx.downloadFile獲取到下載後的地址再繪製canvas中