合成海報是活動、商品分享中比較常用的功能。之前在微信小程序中經常實現，最近由於項目需要，在支付寶小程序中也實現了該功能。實現流程大同小異，但由於是兩個生態的物種，所以也有個別地方需要注意，在此記錄。
需求描述
用戶上傳照片，填寫暱稱，點擊生成海報後將用戶照片和暱稱繪製到固定的背景模板上，同時繪製用戶的分享二維碼。
上傳照片
小程序中實現上傳照片很簡單，從相冊或拍照選擇照片，通過my.uploadFile上傳接口上傳即可。本例中在上傳之前增加了圖片裁剪，避免圖片變形，裁剪組件採用了we-cropper，爲了支持支付寶小程序需要稍微調整下接口。
二維碼生成
本例中的二維碼生成採用了wxbarcode，爲了將二維碼繪製在海報組件上，對源碼進行了部分修改，將本例中的canvas上下文當做參數傳遞給wxbarcode組件，另外還傳遞了二維碼位置和大小。
繪製組件
海報繪製當然是使用canvas了，本例將其封裝爲一個簡單的poster組件，在組件初始化後實例化canvas，並繪製固定背景模板，爲避免canvas在頁面展示，可設置其樣式爲position:fixed;left:100vw;。當用戶上傳照片，填寫信息後，將二維碼、照片和文字繪製到模板上。
注意事項
在支付寶小程序中，上傳照片並裁剪後，將裁剪後生成的臨時路徑傳遞給海報組件，按理說應該可以繪製，但現實是失敗了。所以可在本例的代碼中看到，我在首頁的image組件的imgLoad事件中調用繪製圖片的接口。在微信小程序中不存在該問題，可以將裁剪後的圖片傳遞給海報組件一起繪製。