微信小程序cavas畫圖並保存

需求背景：

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

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: '圖片已保存至相冊'

});

   }

});

   }

});

}

 

值得思考的幾個問題：