小程序分享海报生成:从canvas到保存相册全流程

小程序开发 · 超级管理员

小程序分享海报生成:从canvas到保存相册全流程

裂变拉新里,分享海报是性价比最高的玩法之一。用户点一下,生成带二维码的海报存到相册,发朋友圈就能带来新客。但真要做起来,从 canvas 绘制到保存相册,每一步都有坑。

绘制阶段用小程序原生 canvas 2d 接口。先在一个离屏 canvas 上画背景图、标题、用户信息,再把小程序码 drawImage 上去。注意图片必须先用 wx.getImageInfo 或 downloadFile 拿到本地路径,网络图不能直接画,否则真机上空白。

文字排版要手动算。canvas 没有自动换行,中文要按字符宽度自己断行,长标题记得截断加省略号。字体大小、行高在不同机型上渲染略有差异,关键文案留足边距,别贴边。

合成完成后,用 wx.canvasToTempFilePath 导出成图片临时文件,再调 wx.saveImageToPhotosAlbum 存相册。这一步要提前 wx.authorize 申请相册权限,被拒绝后要引导用户去设置页手动开启,否则会静默失败。

性能上,海报别用太大图,背景压缩到 750px 宽足够,二维码用高清但尺寸小。真机上调一次生成要控制在几百毫秒内,否则用户以为卡死了。我们做过对比,生成超过 800 毫秒的页面,用户放弃率明显更高。

如果团队想把分享做得更精致,廷云信息一般会封装一套海报模板引擎,运营在后台改文案和配图就能出图,不用每次找开发改代码,迭代速度快很多。

如果团队想把分享做得更精致,廷云信息一般会封装一套海报模板引擎,运营在后台改文案和配图就能出图,不用每次找开发改代码,迭代速度快很多。

上线前记得在安卓和 iOS 各测一遍,相册权限被拒的路径要做得友好,别让用户在最后一步卡住。

海报不是做完就完事,要埋点看生成成功率和保存率。哪个模板保存率低,就调文案或配色。数据跑两周,你自然知道用户更喜欢哪种风格,后续迭代也就有了方向。