需求背景：
因微信小程序暫不支持一鍵分享到朋友圈功能，故要生成圖片並保存到手機相冊就有兩種情況：
1.需保存的圖片為靜態固定圖片。這種情況圖片可直接由后端返回，再調用小程序相應api直接保存到手機相冊；
2.需保存的圖片為動態生成圖片（比如，該圖片上的用戶頭像、昵稱、根據特有標志生成的小程序碼等），此時有兩種可行方案，
一是讓后端動態生成圖片返給前端，再由前端保存；二是前端自己繪制圖片並保存。繪制圖片對於前后端來說都會消耗一定時間，但考慮到
大量用戶同時發起該請求時，會降低服務器性能，故最終采用第二種方案。
canvas繪圖實現步驟
1.首先在wxml文件里引入<canvas>組件，並自定義所需長寬，同時給一個id
示例如下：
2.在對應js文件繪制我們所需的圖片
drawImage() { // canvas繪制函數
const { drawInfo } = this.data;
const ctx = wx.createCanvasContext('sharePic');
// 背景
ctx.setFillStyle('#fff');
ctx.fillRect(0, 0, rpx2px(409), rpx2px(560));
if (drawInfo) { // 將下載好的圖片按需按序排列，之所以要重新排列，是因為圖片是異步下載，其順序可能與我們期望的有偏差
const { imgArr } = this.data;
const imgArrSort = [];
for (let i = 0; i < imgArr.length; i += 1) {
imgArrSort[imgArr[i].key] = imgArr[i].url;
}
// ctx.save(); // 保存當前畫布內容
// 用戶頭像
// 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(); // 恢復當前畫布內容
// 昵稱
ctx.setFillStyle('#000');
ctx.setTextAlign('center');
ctx.setFontSize(rpx2px(16));
ctx.fillText(drawInfo.nickname, rpx2px(204), rpx2px(59));
// 圖片標題
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('長按識別小程序碼', 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) { //圖片下載函數，之所以要先將其下載，是因為如果圖片較大或其下載完成速度<canvas繪制速度，圖片處會是空白
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繪制圖片到相冊
saveImage() {
wx.canvasToTempFilePath({
canvasId: 'sharePic',
success(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
wx.showToast({
title: '圖片已保存至相冊'
});
}
});
}
});
}
值得思考的幾個問題：