昨天寫了一篇小程序本地生成二維碼的功能小程序本地生成二維碼，趁熱打鐵今天給大家分享一下小程序內生成海報的功能以及具體步驟

這次分享海報里面的元素比較少，進行繪制的分別有頭像，海報背景以及二維碼（二維碼的生成請看上面《小程序本地生成二維碼》一文），此次沒有涉及到文字的繪制，不過原理大致相同，這篇文章就不對文字繪制進行闡述了。
下面我們就開始吧🙂

注：實現基于mpvue框架，如果使用小程序自有框架直接開發需要少許改動

流程

0-1

0-2

在（0-1）頁面點擊“生成專屬海報” > 跳轉到（0-2）頁面進行海報

資源前期準備

在生成海報之前需要準備，頭像，海報背景圖以及二維碼

為了在海報生成是頁面沒有閃動或者卡頓，需要先在（0-1）頁面把這些數據準備好

需要注意的是，生成海報時需要時臨時文件或者是本地文件，如果是網絡圖片，需要通過wx.getImageInfo() api獲取圖片的臨時路徑

這里頭像用到的是網絡路徑，所以需要獲取頭像的臨時臨時路徑，海報背景在本地直接用本地路徑即可

二維碼則通過weapp-qrcode生成后返回臨時路徑進行使用（生成邏輯詳見文章開頭“小程序本地生成二維碼”）

準備完成后將資源信息以參數的形式傳給（0-2）頁面

let shareInfo = { headerImg: 'tempfilepath', bgImg: '本地路徑的圖片', qrcode: 'tempfilepath'}wx.navigateTo({ url: '/pages/createPoster/main?shareInfo=' + JSON.stringify(shareInfo)})

獲取資源

在（0-2）中獲取參數

我們公司的工程是通過mpvue搭建的，獲取方法是

mounted () { const options = this.$root.$mp.query this.shareInfo= JSON.parse(options.shareInfo)}// 如果是通過微信開發工具直接開發則在onLoad函數中獲取optionsonLoad (options) { const shareInfo = JSON.parse(options.shareInfo)}

畫布的樣式

由于在獲取臨時路勁保存圖片的時候用一倍的canvas保存的圖片會很模糊，我們需要對canvas畫布進行多倍處理，一般二倍即可，太大了在Android上可能會出現問題

也可以以像素比為倍率，這樣比較好處理，這里用的是像素比，具體如下

wx.getSystemInfo({ success (res) { // 通過像素比計算出畫布的實際大小（330x490）是展示的出來的大小 this.width = 330 * res.pixelRatio this.height = 490 * res.pixelRatio }})// 結構樣式<canvas class="canvas-poster" id="canvasPoster" :style="{width:width+'px;',height: height+'px'}" canvas-id="canvasPoster"></canvas><img :src="poster" class="poster-img" @click="previewImg" alt=""><div type="button" @click="savePoster" class="save-btn"> <img src="../img/0.3_btn_yellow_bg.png" alt=""> <div class="btn-text">保存圖片</div></div>.canvas-poster{ background-color: #fafafa; zoom: 50%; // 將畫布縮小到50%（最好通過像素比進行縮小，像素比是2的話就是50%，如果不全是以像素比為標準，在生成圖片的時候可能會出現四周黑邊） position: absolute; left: -10000px; // 將畫布隱藏在可視區域外 background: #206949;}