利用云開發優化博客小程序（三）——生成海報功能
欠下的生(sheng)成海報(bao)的功能終于補(bu)上了
周末花了點(dian)時間(jian)把小(xiao)程序(xu)版博客中的生成海報(bao)的功能給(gei)完成了，對于新手的我(wo)來說(shuo)遇到(dao)的問(wen)題還是(shi)挺多的，這里簡單(dan)記錄(lu)下坑。
首先看下效(xiao)果(guo)圖：
思路
還(huan)是比較簡單，主要就是利用微信提(ti)供的(de)畫布 canvas 來動(dong)態構造海報。引(yin)導用戶保存至本地相冊，用于分(fen)享。
主要涉及小程序畫(hua)布(bu)和(he)圖片相關的(de)API，若是(shi)不太熟(shu)悉的(de)話可以優先(xian)參考下文檔(dang)。
資源準備
首先需要(yao)準備構成海報的(de)一些資源，比如文章(zhang)的(de)首圖(tu)(tu)，標題(ti)，需要(yao)分享的(de)小程序(xu)碼。對(dui)于文章(zhang)的(de)首圖(tu)(tu)，是(shi)(shi)從騰訊云的(de)對(dui)象(xiang)存(cun)儲(chu)中獲取，需要(yao)在(zai)開發設置(zhi)中配置(zhi)好 downloadFile合法(fa)域名(ming) ,至(zhi)于為什(shen)么轉戰騰訊云對(dui)象(xiang)存(cun)儲(chu)可以參考 免費的(de)對(dui)象(xiang)存(cun)儲(chu)——七牛云還是(shi)(shi)騰訊云
獲取圖(tu)片可直(zhi)接通(tong)過 wx.getImageInfo ,對應(ying)的API還是比較簡(jian)單的：
wx.getImageInfo({
src: url,
success (res) {
console.log(res.path)
}
})
至于小程序(xu)碼，目前使用的是小程序(xu)本身(shen)的，暫時沒有動態生成(cheng)，后(hou)期會(hui)迭代。直接(jie)將小程序(xu)碼上(shang)傳至云存儲上(shang),獲取(qu)時也比(bi)較簡單：
wx.cloud.downloadFile({
fileID: fileID
}).then(res => {
console.log(res.tempFilePath)
})
|
最后(hou)，其他需要(yao)在海報上展現的內容，根據實際(ji)情(qing)況進行獲取(qu)。
生成海報
資源準備完(wan)之后，就需要利用畫布進行(xing)構造海(hai)報了(le)。
在wxml添加canvas元(yuan)素，需(xu)要(yao)注(zhu)意的是避免在頁面上展示，可(ke)以將位置設置在屏(ping)幕之外，比如 top:99999rpx
<view class="canvas-box"> <canvas style="width: 600px;height: 970px;" canvas-id="mycanvas" /> view> |
然后需(xu)要(yao)了解下(xia)canvas相關(guan)API和(he)屬(shu)性了。
優先(xian)創建(jian)canvas的繪(hui)(hui)圖(tu)上下文(wen) CanvasContext 對(dui)象,然后(hou)通過CanvasContext中(zhong)的屬性(xing)進(jin)行(xing)繪(hui)(hui)制，最后(hou)通過 draw() 將之前在(zai)繪(hui)(hui)圖(tu)上下文(wen)中(zhong)的描述（路徑、變(bian)形、樣式）畫(hua)到 canvas 中(zhong)。具體(ti)可以參考下面的代碼，結合(he)注釋(shi)和(he)官(guan)方(fang)文(wen)檔很容(rong)易理解(jie)：
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();
|
這(zhe)里需要(yao)注意(yi)的是(shi)填寫文字(zi)時，畫布(bu)是(shi)不(bu)會自(zi)(zi)動換(huan)行(xing)的，所以這(zhe)里需要(yao)根據字(zi)體大(da)小和字(zi)體多少來自(zi)(zi)行(xing)控制換(huan)行(xing)。
在(zai)填充完canvas之后，通過(guo) ;wx.canvasToTempFilePath 來生(sheng)成圖(tu)片，并保存在(zai)臨時路(lu)徑下，具體(ti)代碼如下：
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);
}
});
|
到(dao)這里，最(zui)簡單的海報生成完成了，接下來就(jiu)是涉及交互了。
交互樣式
首先利用(yong)zanui的(de)(de) zan-popup 來實(shi)現彈(dan)出層(ceng)，還(huan)是(shi)比較方便的(de)(de)。具體樣式就(jiu)不貼了，可(ke)以直接(jie)看我的(de)(de)源(yuan)碼。
彈出(chu)層中(zhong)加載生成好的海報圖片，通過(guo)按鈕(niu)引(yin)導(dao)用(yong)戶(hu)(hu)保存至(zhi)本地(di)相(xiang)冊(ce)，在保存相(xiang)冊(ce)時，需要用(yong)戶(hu)(hu)授權(quan)(quan)本地(di)相(xiang)冊(ce)的權(quan)(quan)限，這(zhe)里(li)需要做(zuo)好交互，當用(yong)戶(hu)(hu)拒絕之(zhi)后(hou)再(zai)次想保存時，讓他重新授權(quan)(quan)。
當用戶取消時，再次提醒：
具體代碼(ma)如下，供參(can)考：
/**
* 保存海報圖片
*/
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('獲取保存到相冊權限失敗');
}
}
})
}
});
}
}
})
}
}
});
}
|
到這里，小程序的(de)生成(cheng)海報(bao)功(gong)能(neng)基本上(shang)就完成(cheng)了。
總結
其實生成海報的(de)功能還有(you)很多小問題，由于最近(jin)項(xiang)目(mu)比較緊匆匆上了，后面(mian)找時間會優化。
通(tong)過生成(cheng)海報的功能，主(zhu)要還是(shi)學習了畫布(bu)的API，并通(tong)過實戰也基本(ben)可以上手(shou)canvas，至(zhi)于(yu)畫布(bu)上排版，樣(yang)式就需要自己耐心了，尤其是(shi)一(yi)些(xie)小地方(fang)。
程序上(shang)線后我(wo)才發現(xian)，海報(bao)上(shang)的標題(ti)，由于有中英文，所占(zhan)的字符不同，所以換行的處理過于草率了，導致(zhi)有英文的標題(ti)在位置上(shang)存在偏差(cha)。
后期有空(kong)的話再持續改(gai)善吧～
