wxml
<canvas canvas-id="shareCanvas" style="width:750px;height:1334px;position:absolute;bottom:-800%" />
-800%是不想在頁面上顯示旁蔼，若需要在頁面上顯示請自行設(shè)置
js
getCanvas() {
const that = this
const ctx = wx.createCanvasContext('shareCanvas')
wx.showLoading({
title: '保存中',
})
wx.downloadFile({//網(wǎng)絡(luò)圖片需要先下載
url: xxx,//圖片地址
success(a) {
ctx.drawImage(a.tempFilePath, 0, 0, 750, 1334)//繪制圖像柱宦，圖片惜姐，x軸鞠绰，y軸舰绘，寬，高
ctx.draw()//繪制上下文
wx.downloadFile({//下載第二張圖片以此類推（圖片下載順序自己決定）
url: xxx,//圖片地址
success(a) {
ctx.setFontSize(36)//設(shè)置字體大小
ctx.fillText(that.data.userInfo.nickname, 275, 1000);//要寫的文字和位置
ctx.arc(380, 870, 60, 0, 2 * Math.PI)//創(chuàng)建一條弧線（x軸加上半徑步责，y軸加上半徑烹植，半徑就是寬/2，起始弧度窖贤，終止弧度）創(chuàng)建一個圓可以指定起始弧度為 0砖顷，終止弧度為 2 * Math.PI
ctx.clip();//從原始畫布中剪切任意形狀和尺寸。
ctx.drawImage(a.tempFilePath, 320, 810, 120, 120)//圖片赃梧，x軸滤蝠，y軸，寬授嘀，高（若要畫正圓此處寬高需要一致）
ctx.draw(true)
setTimeout(() => {//因為有延遲所以延遲調(diào)用
wx.canvasToTempFilePath({//把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片物咳。
canvasId: 'shareCanvas',
success: function (b) {
console.log(b)
wx.hideLoading()
wx.saveImageToPhotosAlbum({//保存圖片到手機
filePath: b.tempFilePath,
success: (result) => {
wx.showToast({
title: '保存成功',
icon: 'none'
})
},
complete() {
wx.hideLoading()
}
})
},
fail: function (res) {
console.log(res);
}
});
}, 500);
}
})
}
})
},
