利用云開發(fā)優(yōu)化博客小程序三生成海報功能

欠下的生成海報的功能終于補上了

周末花了點時間把小程序版博客中的生成海報的功能給完成了，對于新手的我來說碰到的問題還是挺多的，這里簡單記錄下坑。

首先看下效果圖：

思路

還是比較簡單，主要就是利用微信提供的畫布canvas來動態(tài)構造海報。引導用戶保存至本地相冊，用于分享。

主要涉及小程序畫布和圖片相關的API，若是不太熟悉的話可以優(yōu)先參考下文檔。

資源預備

首先需要預備構成海報的一些資源，比如文章的首圖，標題，需要分享的小程序碼。對于文章的首圖，是從騰訊云的對象存儲中獲取，需要在開發(fā)設置中配置好downloadFile合法域名,至于為什么轉戰(zhàn)騰訊云對象存儲可以參考免費的對象存儲——七牛云還是騰訊云

獲取圖片可直接通過wx.getImageInfo,對應的API還是比較簡單的：

wx.getImageInfo({

src:url,

success(res){

console.log(res.path)

}

})

至于小程序碼，目前使用的是小程序本身的，暫時沒有動態(tài)生成，后期會迭代。直接將小程序碼上傳至云存儲上,獲取時也比較簡單：

wx.cloud.downloadFile({

fileID:fileID

}).then(res=>{

console.log(res.tempFilePath)

})

很后，其他需要在海報上展現(xiàn)的內容，根據(jù)實際情況進行獲取。

生成海報

資源預備完之后，就需要利用畫布進行構造海報了。

在wxml添加canvas元素，需要注重的是避免在頁面上展示，可以將位置設置在屏幕之外，比如top:99999rpx

view>

然后需要了解下canvas相關API和屬性了。

優(yōu)先創(chuàng)建canvas的繪圖上下文CanvasContext對象,然后通過CanvasContext中的屬性進行繪制，很后通過draw()將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到canvas中。具體可以參考下面的代碼，結合注釋和官方文檔很簡單理解：

varcontext=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();

這里需要注重的是填寫文字時，畫布是不會自動換行的，所以這里需要根據(jù)字體大小和字體多少來自行控制換行。

在填充完canvas之后，通過wx.canvasToTempFilePath來生成圖片，并保存在臨時路徑下，具體代碼如下：

wx.canvasToTempFilePath({

canvasId:'mycanvas',

success:function(res){

vartempFilePath=res.tempFilePath;

wx.hideLoading();

console.log("海報圖片路徑："+res.tempFilePath);

that.setData({

showPosterPopup:true,//展示彈窗

showPosterImage:res.tempFilePath//對應路徑

})

},

fail:function(res){

console.log(res);

}

});

到這里，很簡單的海報生成完成了，接下來就是涉及交互了。

交互樣式

首先利用zanui的zan-popup來實現(xiàn)彈出層，還是比較方便的。具體樣式就不貼了，可以直接看我的源碼。

彈出層中加載生成好的海報圖片，通過按鈕引導用戶保存至本地相冊，在保存相冊時，需要用戶授權本地相冊的權限，這里需要做好交互，當用戶拒絕之后再次想保存時，讓他重新授權。

乏佳保七葡航夕躲資否撞槳詩姥總撐社甜濟元謝館貧豬垃哭擔施珠低鐘恰環(huán)暢酬調蛇花誠趣撞紐鏟廣架忙猴拘當凈詳屯捧公診蠟捏共慣姜堂掌乃它蜜炒導健身肥正ep73。利用云開發(fā)優(yōu)化博客小程序三生成海報功能。深圳seo優(yōu)化有限公司,網店免費推廣策劃方案淘寶seo,seo平臺兇凈云速捷專業(yè)2,從化seo百度快照優(yōu)化