微信小程序生成分享海报方法（附带二维码生成）

昨天写了一篇小程序本地生成二维码的功能小程序本地生成二维码，趁热打铁今天给大家分享一下小程序内生成海报的功能以及具体步骤

这次分享海报里面的元素比较少，进行绘制的分别有头像，海报背景以及二维码（二维码的生成请看上面《小程序本地生成二维码》一文），此次没有涉及到文字的绘制，不过原理大致相同，这篇文章就不对文字绘制进行阐述了。
下面我们就开始吧🙂

注：实现基于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;}