项目功能整理：微信小程序生成二维码海报

刚做完一个微信小程序的项目，现在对项目里的一些功能进行整理，这篇文章记录下如何在小程序里实现生成带有二维码的海报，并保存到用户相册。

以此文章记录，便于后续项目使用。

项目是基于mpvue做的。

项目要求

每个用户可以生成一个属于自己的推广二维码，拉新后记录推广人。

生成的海报最终效果也不复杂，如图：

下面保存图片是个白底的按钮，跟背景色混一块就看不到了。。。

需求分析

通过查阅微信小程序的文档得知，可以借助于小程序提供的canvas绘图功能根据设计图来绘制个canvas图，然后通过保存图片到相册这个API把图片保存到用户的手机相册。

海报中有些内容是固定不变的，比如背景图、邀请话术以及下面长按图片的提示语，而还有些内容是动态的，比如用户名和小程序码，不同项目需求不一样，但都会有变动和不变两类内容，然后我们根据设计图一点一点把内容绘制到图上就行啦。

知道要做什么了，那么我们来罗列下要做的事情（吉德林法则有云：把要解决的问题清清楚楚的列下来，问题就解决了一半）

• 获取用户名
• 获取用户专属小程序码
• 图片绘制
• 处理用户取消保存到相册的授权

动手实现

1. 首先在页面里插入个canvas标签，并把它的位置调整到界面外。至于为啥是通过控制位置而不是控制显示隐藏，动手试过的兄弟都应该知道，优先级问题。

<canvas class="cv-ct-canvas" canvas-id="cv-pic"></canvas>

.cv-ct-canvas {
  position: absolute;
  left: 800rpx;
  width: 300px;
  height: 500px;
}
复制代码