微信小程序canvas合成base64图片

1.wxml中必须有canvas标签

<canvas style="width: 500px; height: 400px;visibility:hidden;position:absolute;" canvas-id="canvas"></canvas>

2.绘图，对照api

var canvas = wx.createCanvasContext('canvas');  //获取context对象，后续都是对它操作
    canvas.setFontSize(20);
    canvas.setFillStyle('#fff');
    canvas.setTextAlign('center');
    canvas.setFillStyle('#1C0455')
    canvas.fillRect(0, 0, 500, 400);
    canvas.drawImage('/image/bg15.png', 0, 0, 500, 400)
    canvas.drawImage(params.head, 220, 30, 80, 80)

3.调用draw()；合成，必须在draw方法回调中执行后续方法，保证绘图完整

canvas.draw(false,() => {
      wx.canvasToTempFilePath({ //获取生成的临时图片
        canvasId: 'canvas',
        success: function (res) {
          wx.getFileSystemManager().readFile({   // 文件管理系统按照base64方式读取生成的图片
            filePath: res.tempFilePath, //选择图片返回的相对路径
            encoding: 'base64', //编码格式
            success: res => { //成功的回调
              callback('data:image/png;base64,' + res.data)
            }
          })
        }
      })
    })