小程序開發之分享海報並保存到相冊功能

項目地址：github.com/yancekang/w… 歡迎star

演示：

小程序生成海報並不能像客戶端同樣，採用截取頁面上指定部分做爲生成海報，而是須要用到canvas按照海報模板生成一張圖片。

首先咱們看下實現的效果

首先咱們須要在頁面上插入canvas標籤 <canvas canvas-id="my_canvas"></canvas>

經過 css隱藏canvas， 須要將canvas定位到頁面不可見部位。設置以下屬性將canvas定位頁面以外。

position: fixed;
 left: -200vw;
複製代碼

注意：設置canvas尺寸是儘可能使用px，是爲了尺寸大小和生成海報是尺寸一致

不能使用 display: none隱藏canvas

開始繪製

建立 canvas的繪圖對象 wx.createCanvasContext

let canvasW = 700   //定義畫布寬高，具體根據海報模板定義
 let canvasH = 1200 
 const ctx = wx.createCanvasContext('my_canvas')   // 獲取繪圖對象 my_canvas 爲頁面canvas的id
 ctx.clearRect(0, 0, canvasW, canvasH) // 清空畫布
 ctx.setFillStyle('#ffffff')     //設置填充色
 ctx.fillRect(0, 0, canvasW, canvasH)	//填充畫布
複製代碼

以後，畫布就是一個700*1200白色背景的白板。

首先繪製一個高度爲800px藍色背景

//繪製藍色背景
ctx.setFillStyle('#0B5FA5')     //設置填充色
ctx.fillRect(0, 0, 690, 800)
複製代碼

繪製每日一語，這裏須要計算文字長度，而且內容在藍色區域上下居中

ctx.setFontSize(40);  //設置字體大小
ctx.setFillStyle("#fff")    //設置字體顏色
複製代碼

根據內容長度進行換行，當每一行超過630時，進入第二行繪製，這裏將每一行文字放入到一個數組中，而後進行繪製數組裏面的數據。

for (var a = 0; a < yiyu.length; a++) {
	if (ctx.measureText(temp).width < 630 && ctx.measureText(temp + (yiyu[a])).width <= 630) {
    	temp += yiyu[a];
    }//ctx.measureText(text).width  測量文本text的寬度
    else {
    	row.push(temp);
    	temp = yiyu[a];
    }
}
row.push(temp);
複製代碼

// 尋找繪製內容的Y座標，也就是藍色區域高度-內容高度（行數* 行高）/ 2
let top = (800 - row.length * 48) / 2
for (var b = 0; b < row.length; b++) {
	console.log(((800 - top) / 2) + (b + 1) * 48)
	ctx.fillText(row[b], 30, top + (b + 1) * 48);
}
複製代碼

至此，完成藍色區域及內容繪製

接下來繪製用戶暱稱及頭像、二維碼，接下來比較簡單，一層一層繪製就好了。

在繪製圖片時，值得注意的是須要將圖片先轉換爲本地圖片

所要繪製的圖片資源（網絡圖片要經過 getImageInfo / downloadFile 先下載）

繪製頭像

// 45爲圓角，90爲頭像寬高
ctx.save()
ctx.arc(30 + 45, 855 + 45, 45, 0, 2 * Math.PI);
ctx.clip()   //裁剪圓角
ctx.drawImage(this.data.user_img, 30, 855, 90, 90)
ctx.restore()  // 還原上次保存
複製代碼

繪製暱稱及提示信息

// 繪製暱稱
ctx.setFontSize(32);
ctx.setFillStyle("#333")
ctx.fillText('科技男', 150, 890)
ctx.setFontSize(24);
ctx.setFillStyle("#999")
ctx.fillText('邀請您使用微信小程序', 150, 930)
複製代碼

繪製二維碼

// 繪製二維碼
ctx.drawImage(this.data.qr_img, 540, 835, 100, 100)
ctx.fillText('長按識別二維碼', 500, 970)
複製代碼

至此整個海報繪製完成。

保存到相冊時須要獲取相冊權限，可用

wx.getSetting({
	success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success() {
                    that.saveImages()
                },
                fail() {
                    wx.showToast({
                        title: '保存失敗',
                        icon: "none"
                        })
                     }
                })
            } else {
            that.saveImages()
            }
    	}
    })
})
複製代碼

將canvas生成圖片並保存

wx.canvasToTempFilePath({
      canvasId: 'my_canvas',
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.hideLoading()
            wx.showToast({
              title: '保存成功',
              icon: 'none'
            })
          }, complete: function () {
            wx.hideLoading()
          }
        })
      }
    })
複製代碼