需求背景：

因微信小程序暫不支持一鍵分享到朋友圈功能，故要生成圖片并保存到手機(jī)相冊(cè)就有兩種情況：

1.需保存的圖片為靜態(tài)固定圖片。這種情況圖片可直接由后端返回，再調(diào)用小程序相應(yīng)api直接保存到手機(jī)相冊(cè)；

2.需保存的圖片為動(dòng)態(tài)生成圖片（比如，該圖片上的用戶頭像、昵稱、根據(jù)特有標(biāo)志生成的小程序碼等），此時(shí)有兩種可行方案，

一是讓后端動(dòng)態(tài)生成圖片返給前端，再由前端保存；二是前端自己繪制圖片并保存。繪制圖片對(duì)于前后端來說都會(huì)消耗一定時(shí)間，但考慮到

大量用戶同時(shí)發(fā)起該請(qǐng)求時(shí)，會(huì)降低服務(wù)器性能，故最終采用第二種方案。

canvas繪圖實(shí)現(xiàn)步驟

1.首先在wxml文件里引入<canvas>組件，并自定義所需長(zhǎng)寬，同時(shí)給一個(gè)id

示例如下：

2.在對(duì)應(yīng)js文件繪制我們所需的圖片

drawImage() { // canvas繪制函數(shù)
const { drawInfo } = this.data;
const ctx = wx.createCanvasContext('sharePic');
// 背景
ctx.setFillStyle('#fff');
ctx.fillRect(0, 0, rpx2px(409), rpx2px(560));

if (drawInfo) { // 將下載好的圖片按需按序排列，之所以要重新排列，是因?yàn)閳D片是異步下載，其順序可能與我們期望的有偏差
const { imgArr } = this.data;
const imgArrSort = [];
for (let i = 0; i < imgArr.length; i += 1) {
imgArrSort[imgArr[i].key] = imgArr[i].url;
}
// ctx.save(); // 保存當(dāng)前畫布內(nèi)容

// 用戶頭像
// ctx.strokeStyle = '#fff';
// ctx.lineWidth = rpx2px(2);
// ctx.beginPath();
// ctx.arc(rpx2px(83), rpx2px(60), rpx2px(30), 0, 2 * Math.PI);
// ctx.closePath();
// ctx.stroke();
// ctx.clip();
// ctx.drawImage(
// imgArrSort[0],
// rpx2px(53),
// rpx2px(30),
// rpx2px(60),
// rpx2px(60)
// );
// ctx.restore(); // 恢復(fù)當(dāng)前畫布內(nèi)容

// 昵稱
ctx.setFillStyle('#000');
ctx.setTextAlign('center');
ctx.setFontSize(rpx2px(16));
ctx.fillText(drawInfo.nickname, rpx2px(204), rpx2px(59));

// 圖片標(biāo)題
ctx.setFillStyle('#fe4070'); // 文字顏色：黑色
ctx.setFontSize(rpx2px(26));
ctx.fillText(drawInfo.share_title, rpx2px(204), rpx2px(127));

// 圖片
ctx.drawImage(
imgArrSort[0],
rpx2px(53),
rpx2px(154),
rpx2px(302),
rpx2px(201)
);

// 小程序碼
const qrImgSize = rpx2px(140);
ctx.drawImage(
imgArrSort[1],
rpx2px(56),
rpx2px(377),
qrImgSize,
qrImgSize
);

// 小程序碼文字說明
ctx.setFillStyle('#333');
ctx.setTextAlign('left');
ctx.setFontSize(rpx2px(17));
ctx.fillText('長(zhǎng)按識(shí)別小程序碼', rpx2px(213), rpx2px(435));

ctx.draw();
} else {
// 獲取繪制信息失敗
// 圖片加載失敗提示文案
ctx.setFillStyle('#999'); // 文字顏色：黑色
ctx.setFontSize(rpx2px(22));
ctx.fillText('圖片加載失敗', rpx2px(140), rpx2px(280));
ctx.setFillStyle('#fff');
ctx.draw();
}
},

downLoadImg(imgList) { //圖片下載函數(shù)，之所以要先將其下載，是因?yàn)槿绻麍D片較大或其下載完成速度<canvas繪制速度，圖片處會(huì)是空白
const that = this;
for (let i = 0; i < imgList.length; i += 1) {
wx.downloadFile({
url: imgList[i],
success: res => {
const { imgArr } = that.data;
imgArr.push({ key: i, url: res.tempFilePath });
that.setData({
imgArr
});
　}
});
}
}

3.保存canvas繪制圖片到相冊(cè)

saveImage() {
wx.canvasToTempFilePath({
canvasId: 'sharePic',
success(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
wx.showToast({
title: '圖片已保存至相冊(cè)'
});
}
});
}
});
}

值得思考的幾個(gè)問題：

總結(jié)

以上是生活随笔為你收集整理的微信小程序cavas画图并保存的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。