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

這次分享海報(bào)里面的元素比較少，進(jìn)行繪制的分別有頭像拿霉，海報(bào)背景以及二維碼（二維碼的生成請(qǐng)看上面《小程序本地生成二維碼》一文）曹体，此次沒(méi)有涉及到文字的繪制扳缕，不過(guò)原理大致相同，這篇文章就不對(duì)文字繪制進(jìn)行闡述了举畸。

下面我們就開(kāi)始吧??
注：實(shí)現(xiàn)基于mpvue框架查排，如果使用小程序自有框架直接開(kāi)發(fā)需要少許改動(dòng)

流程

0-1

0-2

在（0-1）頁(yè)面點(diǎn)擊“生成專屬海報(bào)” > 跳轉(zhuǎn)到（0-2）頁(yè)面進(jìn)行海報(bào)

資源前期準(zhǔn)備

在生成海報(bào)之前需要準(zhǔn)備，頭像抄沮，海報(bào)背景圖以及二維碼
為了在海報(bào)生成是頁(yè)面沒(méi)有閃動(dòng)或者卡頓跋核，需要先在（0-1）頁(yè)面把這些數(shù)據(jù)準(zhǔn)備好

需要注意的是，生成海報(bào)時(shí)需要時(shí)臨時(shí)文件或者是本地文件合是，如果是網(wǎng)絡(luò)圖片了罪，需要通過(guò)wx.getImageInfo() api獲取圖片的臨時(shí)路徑

這里頭像用到的是網(wǎng)絡(luò)路徑，所以需要獲取頭像的臨時(shí)臨時(shí)路徑聪全，海報(bào)背景在本地直接用本地路徑即可
二維碼則通過(guò)weapp-qrcode生成后返回臨時(shí)路徑進(jìn)行使用（生成邏輯詳見(jiàn)文章開(kāi)頭“小程序本地生成二維碼”）
準(zhǔn)備完成后將資源信息以參數(shù)的形式傳給（0-2）頁(yè)面

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

獲取資源

在（0-2）中獲取參數(shù)
我們公司的工程是通過(guò)mpvue搭建的，獲取方法是

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

生活?yuàn)蕵?lè)：夏天到了辅辩，來(lái)喝點(diǎn)雪碧可樂(lè)吧?

畫(huà)布的樣式

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

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

wx.getSystemInfo({
  success (res) {
    // 通過(guò)像素比計(jì)算出畫(huà)布的實(shí)際大星妗（330x490）是展示的出來(lái)的大小
    this.width = 330 * res.pixelRatio
    this.height = 490 * res.pixelRatio
  }
})
// 結(jié)構(gòu)樣式
<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%; // 將畫(huà)布縮小到50%（最好通過(guò)像素比進(jìn)行縮小，像素比是2的話就是50%节沦，如果不全是以像素比為標(biāo)準(zhǔn)键思，在生成圖片的時(shí)候可能會(huì)出現(xiàn)四周黑邊）
  position: absolute;
  left: -10000px; // 將畫(huà)布隱藏在可視區(qū)域外
  background: #206949;
}

生成之前獲取畫(huà)布信息

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

生成邏輯

methods: {
  drawImage (canvasAttrs) {
    let ctx = wx.createCanvasContext('canvasPoster', this)
    let canvasW = canvasAttrs.width // 畫(huà)布的真實(shí)寬度
    let canvasH = canvasAttrs.height //畫(huà)布的真實(shí)高度
    // 頭像和二維碼大小都需要在規(guī)定大小的基礎(chǔ)上放大像素比的比例后面都會(huì) *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)') //設(shè)置線條顏色，如果不設(shè)置默認(rèn)是黑色甫贯，頭像四周會(huì)出現(xiàn)黑邊框
    ctx.arc(headerX + headerW / 2, headerY + headerW / 2, headerW / 2, 0, 2 * Math.PI)
    ctx.stroke()
    //畫(huà)完之后執(zhí)行clip()方法吼鳞，否則不會(huì)出現(xiàn)圓形效果
    ctx.clip()
    // 將頭像畫(huà)到畫(huà)布上
    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推測(cè)是因?yàn)樵趯?xiě)樣式的時(shí)候?qū)懥斯潭ǖ膠oom: 50%而沒(méi)有用像素比縮放導(dǎo)致的黑邊，所以在生成時(shí)進(jìn)行了適當(dāng)?shù)目s小生成叫搁，這個(gè)大家可以自行嘗試
      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) {
      //預(yù)覽圖片赔桌，預(yù)覽后可長(zhǎng)按保存或者分享給朋友
      wx.previewImage({
        urls: [this.poster]
      })
    }
  },
  savePoster () {
    if (this.poster) {
      wx.saveImageToPhotosAlbum({
        filePath: this.poster,
        success: (result) => {
          wx.showToast({
            title: '海報(bào)已保存，快去分享給好友吧渴逻。',
            icon: 'none'
          })
        }
      })
    }
  }
}

以上就是今天分享的所有內(nèi)容了疾党，謝謝觀看，喜歡可以點(diǎn)贊加關(guān)注哦??

相關(guān)推薦

微信小程序內(nèi)生成二維碼

[微信小程序分享小程序碼的生成（帶參數(shù)）以及參數(shù)的獲取]

微信小程序生成清晰海報(bào)(http://www.reibang.com/p/108233ed7ed0)

簡(jiǎn)單實(shí)現(xiàn)小程序自定義導(dǎo)航欄（基于mpvue）

微信小程序中的版本管理

生活?yuàn)蕵?lè)

惨奕！驚雪位，跑步竟然能跑出錢(qián)來(lái)（你的額外收入）

大家注意啦，產(chǎn)品經(jīng)理打人啦墓贿！(一)

完