微信小程序cavas畫圖並保存

需求背景前端

因微信小程序暫不支持一鍵分享到朋友圈功能,故要生成圖片並保存到手機相冊就有兩種狀況:canvas

1.需保存的圖片爲靜態固定圖片。這種狀況圖片可直接由後端返回,再調用小程序相應api直接保存到手機相冊;小程序

2.需保存的圖片爲動態生成圖片(好比,該圖片上的用戶頭像、暱稱、根據特有標誌生成的小程序碼等),此時有兩種可行方案,後端

一是讓後端動態生成圖片返給前端,再由前端保存;二是前端本身繪製圖片並保存。繪製圖片對於先後端來講都會消耗必定時間,但考慮到微信小程序

大量用戶同時發起該請求時,會下降服務器性能,故最終採用第二種方案。api

 

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: '圖片已保存至相冊'
});
   }
});
   }
});
}
 
值得思考的幾個問題:
相關文章
相關標籤/搜索