如何在微信小程序中生成带个人二维码和头像的专属海报呢？

前言

先说一下开发背景微信小程序生成海报，我们公司是做 IT 培训的，公司在各种节日的时候都会以海报的形式发布各种优惠活动，以促进更多的报名量微信小程序生成海报，海报中带有公司的二维码，通过二维码就能联系到我们公司的客服小姐姐（效果看下图）

但这样的宣传力度有限，毕竟没人帮你宣传，因为分享难（没）度（有）太（好）大（处），为了让更多的人参与其中并从受益，从而达到裂变的效果，公司提出了这么一个需求：开发一个生成海报功能，让用户能在海报中放上自己的专属二维码和头像。

这样的好处是，通过你的海报报名的学生，你会从中得到一定的收益（想了解收益详情的可以联系我）。作为该活动的提出者，开发的任务自然就落到我的头上（我为什么要提出这活动方案!)

硬着头皮上呗！主是之前没在小程序中做过类似这样的功能，我大概知道要用 Canvas 来实现，有想法就上

技术背景

原生微信小程序开发使用的技术就不用说了

wxml

javascript

json

wxss

（我还是说了）

UI使用的有赞的vant-weapp，后端采用的是 云开发

小程序整体页面效果

准备工作

在生成海报之前需要准备：海报图片，个人二维码图片以及头像图片

一、 获取海报信息

海报图片就用上面的海报，上面的客服二维码先不用管，一会我们用自己的二维码覆盖上去。

我的海报图片是放在小程序云存储中，所以在data中使用posterUrl存放地址就行，还需要获取二维码在海报中的位置，使用qrcodePosition存放

二、 获取二维码信息

二维码一般由用户上传，使用wx.chooseMedia()让用户在相册中自行选择个人二维码

wxml结构代码如下：

结构中做了个判断，用户没选择二维码时显示一个图标，选择后显示二维码图片和删除按钮，效果如下

JS代码如下：

三、获取头像信息

头像获取使用微信的“头像选择”功能，让用户可以使用微信头像或相册中选取一张图片作为的头像，也可以现场自拍一张，效果如下：

wxml结构代码如下：

与二维码一样，wxml结构中做了个判断，用户没选择头像时显示一个图标，选择后显示头像图片和删除按钮，效果如下：

PS: 头像这里我还做了一样功能，当用户之前授权过头像获取时自动选择，从而减少用户的步骤

JS代码如下：

四、获取画布信息

wxml中的代码：

小程序中没有DOM，不能用document获取页面元素，需要通过wx.createSelectorQuery()进行获取，同时还能获取canvas画布的宽高信息

JS代码如下：

五、生成海报

以上步骤全部完成后就可以开始生成海报了，先获取几张图片的信息，我们使用微信自带的wx.getImageInfo()获取海报图片的地址、宽高等信息

PS: 生成海报时需要时临时文件或者是本地文件，如果是网络图片，需要通过 wx.getImageInfo() 获取图片的临时路径

1. 获取海报图片信息

2. 获取二维码图片信息

3. 获取头像图片信息

4. 开始生成带二维码和头像的专属海报

接着就可以利用canvas画布按我们的需求生成专属海报了（以下代码接着上面四、获取画布信息的代码继续编写）

1）根据海报高度自动调节canvas高度

PS：需要使用设备像素比来调节画布大小，否则 canvas 保存的图片会很模糊，我们需要对 canvas 画布进行多倍处理

2）绘制海报

3）绘制二维码

4）绘制头像

5. 最终海报效果

图片效果可能看得不是很清楚，大家可以搜索趣学旅程小程序测试效果（也可以扫下小程序码进入）