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: '圖片已保存至相冊'
});
}
});
}
});
}
值得思考的幾個問題: