微信小程序生成分享海報方法（附帶二維碼生成）

更新時間：2019年03月29日 10:15:14 作者：dillon_fly

這篇文章主要介紹了微信小程序生成分享海報方法（附帶二維碼生成），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

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

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

流程

0-1

0-2

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

資源前期準備

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

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

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

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

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

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

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

獲取資源

在（0-2）中獲取參數(shù)

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

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

畫布的樣式

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

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

wx.getSystemInfo({
 success (res) {
 // 通過像素比計算出畫布的實際大?。?30x490）是展示的出來的大小
 this.width = 330 * res.pixelRatio
 this.height = 490 * res.pixelRatio
 }
})
// 結(jié)構樣式
<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%，如果不全是以像素比為標準，在生成圖片的時候可能會出現(xiàn)四周黑邊）
 position: absolute;
 left: -10000px; // 將畫布隱藏在可視區(qū)域外
 background: #206949;
}

生成之前獲取畫布信息

mounted () {
 var query = wx.createSelectorQuery()
 query.select('#canvasPoster').boundingClientRect((res) => {
 // 返回值包括畫布的實際寬高
 this.drawImage(res)
 }).exec()
}

生成邏輯

methods: {
 drawImage (canvasAttrs) {
 let ctx = wx.createCanvasContext('canvasPoster', this)
 let canvasW = canvasAttrs.width // 畫布的真實寬度
 let canvasH = canvasAttrs.height //畫布的真實高度
 // 頭像和二維碼大小都需要在規(guī)定大小的基礎上放大像素比的比例后面都會 *this.systemInfo.pixelRatio
 let headerW = 48 * this.systemInfo.pixelRatio
 let headerX = (canvasW - headerW) / 2
 let headerY = 40 * this.systemInfo.pixelRatio
 let qrcodeW = 73 * this.systemInfo.pixelRatio
 let qrcodeX = 216 * this.systemInfo.pixelRatio
 let qrcodeY = 400 * this.systemInfo.pixelRatio
 // 填充背景
 ctx.drawImage(this.shareInfo.bgImg, 0, 0, canvasW, canvasH)
 ctx.save()
 // 控制頭像為圓形
 ctx.setStrokeStyle('rgba(0,0,0,.2)') //設置線條顏色，如果不設置默認是黑色，頭像四周會出現(xiàn)黑邊框
 ctx.arc(headerX + headerW / 2, headerY + headerW / 2, headerW / 2, 0, 2 * Math.PI)
 ctx.stroke()
 //畫完之后執(zhí)行clip()方法，否則不會出現(xiàn)圓形效果
 ctx.clip()
 // 將頭像畫到畫布上
 ctx.drawImage(this.shareInfo.headerImg, headerX, headerY, headerW, headerW)
 ctx.restore()
 ctx.save()
 // 繪制二維碼
 ctx.drawImage(this.shareInfo.qrcode, qrcodeX, qrcodeY, qrcodeW, qrcodeW)
 ctx.save()
 ctx.draw()
 setTimeout(() => {
 //下面的13以及減26推測是因為在寫樣式的時候?qū)懥斯潭ǖ膠oom: 50%而沒有用像素比縮放導致的黑邊，所以在生成時進行了適當?shù)目s小生成，這個大家可以自行嘗試
 wx.canvasToTempFilePath({
 canvasId: 'canvasPoster',
 x: 13,
 y: 13,
 width: canvasW - 26,
 height: canvasH - 26,
 destWidth: canvasW - 26,
 destHeight: canvasH - 26,
 success: (res) => {
  this.poster = res.tempFilePath
 }
 })
 }, 200)
 },
 previewImg () {
 if (this.poster) {
 //預覽圖片，預覽后可長按保存或者分享給朋友
 wx.previewImage({
 urls: [this.poster]
 })
 }
 },
 savePoster () {
 if (this.poster) {
 wx.saveImageToPhotosAlbum({
 filePath: this.poster,
 success: (result) => {
  wx.showToast({
  title: '海報已保存，快去分享給好友吧。',
  icon: 'none'
  })
 }
 })
 }
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: