本文實例講述了微信小程序?qū)崿F(xiàn)的canvas合成圖片功能。分享給大家供大家參考，具體如下：
創(chuàng)新互聯(lián)自2013年起，先為竹溪等服務(wù)建站，竹溪等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為竹溪企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
先要獲取圖片的信息 然后將需要合成的內(nèi)容用canvas繪制出來，得到一個合成好的畫布，接下來用 wx.canvasToTempFilePath 把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片，并返回文件路徑。這個時候的路徑 是微信的臨時路徑，瀏覽器是訪問不了的，因此需要請求服務(wù)器 用 wx.uploadFile 將本地資源上傳到開發(fā)者服務(wù)器。
在頁面的wxml中加入canvas組件如下：
在js中
重慶分公司
重慶分公司
picture: function () { //生成圖片
let that = this;
let p1 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: 圖片路徑,
success(res) {
resolve(res);
}
})
}).then(res => {
const ctx = wx.createCanvasContext('shareCanvas');
ctx.drawImage(res.path, 0, 0, 375, 300); //繪制背景圖
//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: 375,
height: 300,
destWidth: 750, //輸出的圖片的寬度（寫成width的兩倍，生成的圖片則更清晰）
destHeight: 600,
canvasId: 'shareCanvas',
success: function (res) {
console.log(res);
that.draw_uploadFile(res);
},
})
},300)
},
draw_uploadFile: function (r) { //wx.uploadFile 將本地資源上傳到開發(fā)者服務(wù)器
let that = this;
wx.uploadFile({
url: 圖片上傳接口, //線上接口
filePath: r.tempFilePath,
name: 'imgFile',
success: function (res) {
console.log(res);
if(res.statusCode==200){
res.data = JSON.parse(res.data);
let imgsrc = res.data.data.src;
that.setData({
imgPath: imgsrc
});
}else{
console.log('失敗')
}
},
})
},
注意：若是將此方法寫成自定義組件，則 wx.createCanvasContext 和 wx.canvasToTempFilePath 都需要多傳一個this，
因在自定義組件下，當(dāng)前組件實例的this，用以操作組件內(nèi) 組件。
至于分享的話 ，拿到服務(wù)器返回的圖片路徑之后 就可以用來寫分享的圖片路徑了
希望本文所述對大家微信小程序開發(fā)有所幫助。
