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("文本內(nèi)容", 20, 70) //開始繪制文本的 x/y 坐標位置（相對于畫布）
ctx.stroke();//stroke() 方法會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑杰赛。默認顏色是黑色
ctx.draw(false, that.drawPicture());//draw()的回調(diào)函數(shù)
console.log(res.path);
})
},
drawPicture: function () { //生成圖片
var that = this;
setTimeout(function () {
wx.canvasToTempFilePath({ //把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片，并返回文件路徑
x: 0,
y: 0,
width: 610,
height: 812,
destWidth: 610, //輸出的圖片的寬度（寫成width的兩倍者吁，生成的圖片則更清晰）
destHeight: 812,
canvasId: 'shareCanvas',
success: function (res) {
console.log('++++++++++++++', res);
},
})
}, 300)
}
