利用云開發優化博客小程序（三）——生成海報功能
欠下的生成海報的功能終于補上了
周末花了點時間把小程序版博客中的生成海報的功能給完成了，對于新手的我來說遇到的問題還是挺多的，這里簡單記錄下坑。
首先看下效果圖：
思路
還是比較簡單，主要就是利用微信提供的畫布 canvas 來動態構造海報。引導用戶保存至本地相冊，用于分享。
主要涉及小程序畫布和圖片相關的API，若是不太熟悉的話可以優先參考下文檔。
資源準備
首先需要準備構成海報的一些資源，比如文章的首圖，標題，需要分享的小程序碼。對于文章的首圖，是從騰訊云的對象存儲中獲取，需要在開發設置中配置好 downloadFile合法域名 ,至于為什么轉戰騰訊云對象存儲可以參考 免費的對象存儲——七牛云還是騰訊云
獲取圖片可直接通過 wx.getImageInfo ,對應的API還是比較簡單的：
wx.getImageInfo({
src: url,
success (res) {
console.log(res.path)
}
})
至于小程序碼，目前使用的是小程序本身的，暫時沒有動態生成，后期會迭代。直接將小程序碼上傳至云存儲上,獲取時也比較簡單：
wx.cloud.downloadFile({
fileID: fileID
}).then(res => {
console.log(res.tempFilePath)
})
|
最后，其他需要在海報上展現的內容，根據實際情況進行獲取。
生成海報
資源準備完之后，就需要利用畫布進行構造海報了。
在wxml添加canvas元素，需要注意的是避免在頁面上展示，可以將位置設置在屏幕之外，比如 top:99999rpx
<view class="canvas-box"> <canvas style="width: 600px;height: 970px;" canvas-id="mycanvas" /> view> |
然后需要了解下canvas相關API和屬性了。
優先創建canvas的繪圖上下文 CanvasContext 對象,然后通過CanvasContext中的屬性進行繪制，最后通過 draw() 將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中。具體可以參考下面的代碼，結合注釋和官方文檔很容易理解：
var context = wx.createCanvasContext('mycanvas');
context.setFillStyle('#ffffff');//設置填充色
context.fillRect(0, 0, 600, 970);//填充一個矩形。用 setFillStyle 設置矩形的填充色
context.drawImage(postImageLocal, 0, 0, 600, 300); //繪制首圖
context.drawImage(qrcodeLoal, 210, 650, 180, 180); //繪制二維碼
context.setFillStyle("#000000");
context.setFontSize(20);//設置字體大小
context.setTextAlign('center');//設置字體對齊
context.fillText("閱讀文章,請長按識別二維碼", 300, 895);
context.setFillStyle("#000000");
context.beginPath() //分割線
context.moveTo(30, 620)
context.lineTo(570, 620)
context.stroke();
context.setTextAlign('left');
context.setFontSize(40);
if (title.lengh <= 12) {
context.fillText(title, 40, 360);//文章標題
} else {
context.fillText(title.substring(0, 12), 40, 360);
context.fillText(title.substring(12, 26), 40, 410);
}
context.setFontSize(20);
if (custom_excerpt.lengh <= 26) {
context.fillText(custom_excerpt, 40, 470);//文章描述
} else {
context.fillText(custom_excerpt.substring(0, 26), 40, 470);
context.fillText(custom_excerpt.substring(26, 50) + '...', 40, 510);
}
context.draw();
|
這里需要注意的是填寫文字時，畫布是不會自動換行的，所以這里需要根據字體大小和字體多少來自行控制換行。
在填充完canvas之后，通過 wx.canvasToTempFilePath 來生成圖片，并保存在臨時路徑下，具體代碼如下：
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function(res) {
var tempFilePath = res.tempFilePath;
wx.hideLoading();
console.log("海報圖片路徑：" + res.tempFilePath);
that.setData({
showPosterPopup: true,//展示彈窗
showPosterImage: res.tempFilePath //對應路徑
})
},
fail: function(res) {
console.log(res);
}
});
|
到這里，最簡單的海報生成完成了，接下來就是涉及交互了。
交互樣式
首先利用zanui的 zan-popup 來實現彈出層，還是比較方便的。具體樣式就不貼了，可以直接看我的源碼。
彈出層中加載生成好的海報圖片，通過按鈕引導用戶保存至本地相冊，在保存相冊時，需要用戶授權本地相冊的權限，這里需要做好交互，當用戶拒絕之后再次想保存時，讓他重新授權。
當用戶取消時，再次提醒：
具體代碼如下，供參考：
/**
* 保存海報圖片
*/
savePosterImage: function() {
let that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.showPosterImage,
success(result) {
console.log(result)
wx.showModal({
title: '提示',
content: '二維碼海報已存入手機相冊，趕快分享到朋友圈吧',
showCancel: false,
success: function(res) {
that.setData({
showPosterPopup: false
})
}
})
},
fail: function(err) {
console.log(err);
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
console.log("再次發起授權");
wx.showModal({
title: '用戶未授權',
content: '如需保存海報圖片到相冊，需獲取授權.是否在授權管理中選中“保存到相冊”?',
showCancel: true,
success: function(res) {
if (res.confirm) {
console.log('用戶點擊確定')
wx.openSetting({
success: function success(res) {
console.log('打開設置', res.authSetting);
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log('獲取保存到相冊權限成功');
} else {
console.log('獲取保存到相冊權限失敗');
}
}
})
}
});
}
}
})
}
}
});
}
|
到這里，小程序的生成海報功能基本上就完成了。
總結
其實生成海報的功能還有很多小問題，由于最近項目比較緊匆匆上了，后面找時間會優化。
通過生成海報的功能，主要還是學習了畫布的API，并通過實戰也基本可以上手canvas，至于畫布上排版，樣式就需要自己耐心了，尤其是一些小地方。
程序上線后我才發現，海報上的標題，由于有中英文，所占的字符不同，所以換行的處理過于草率了，導致有英文的標題在位置上存在偏差。
后期有空的話再持續改善吧～
