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)
}
})
}
})
})