xml文件
<view class="canvasBox">
<canvas canvas-id="shareCanvas" style="width:610rpx;height:812rpx"></canvas>
</view>
js文件
combineImage: function () {
let that = this;
let p1 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: that.data.completePicPath,
success(res) {
resolve(res);
}
})
}).then(res => {
const ctx = wx.createCanvasContext('shareCanvas');
ctx.drawImage(res.path, 0, 0, 305, 406); //绘制背景图
//ctx.setTextAlign('center') // 文字居中
ctx.setFillStyle('#000000') // 文字颜色：黑色
ctx.setFontSize(20) // 文字字号：22px
ctx.fillText("文本内容", 20, 70) //开始绘制文本的 x/y 坐标位置（相对于画布）
ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
ctx.draw(false, that.drawPicture());//draw()的回调函数
console.log(res.path);
})
},
drawPicture: function () { //生成图片
var that = this;
setTimeout(function () {
wx.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
x: 0,
y: 0,
width: 610,
height: 812,
destWidth: 610, //输出的图片的宽度（写成width的两倍，生成的图片则更清晰）
destHeight: 812,
canvasId: 'shareCanvas',
success: function (res) {
console.log('++++++++++++++', res);
},
})
}, 300)
}
