合成海报是活动、商品分享中比较常用的功能。之前在微信小程序中经常实现，最近由于项目需要，在支付宝小程序中也实现了该功能。实现流程大同小异，但由于是两个生态的物种，所以也有个别地方需要注意，在此记录。
需求描述
用户上传照片，填写暱称，点击生成海报后将用户照片和暱称绘制到固定的背景模板上，同时绘制用户的分享二维码。
上传照片
小程序中实现上传照片很简单，从相册或拍照选择照片，通过my.uploadFile上传接口上传即可。本例中在上传之前增加了图片裁剪，避免图片变形，裁剪组件采用了we-cropper，为了支持支付宝小程序需要稍微调整下接口。
二维码生成
本例中的二维码生成采用了wxbarcode，为了将二维码绘制在海报组件上，对源码进行了部分修改，将本例中的canvas上下文当做参数传递给wxbarcode组件，另外还传递了二维码位置和大小。
绘制组件
海报绘制当然是使用canvas了，本例将其封装为一个简单的poster组件，在组件初始化后实例化canvas，并绘制固定背景模板，为避免canvas在页面展示，可设置其样式为position:fixed;left:100vw;。当用户上传照片，填写信息后，将二维码、照片和文字绘制到模板上。
注意事项
在支付宝小程序中，上传照片并裁剪后，将裁剪后生成的临时路径传递给海报组件，按理说应该可以绘制，但现实是失败了。所以可在本例的代码中看到，我在首页的image组件的imgLoad事件中调用绘制图片的接口。在微信小程序中不存在该问题，可以将裁剪后的图片传递给海报组件一起绘制。