微信小程序生成图片,是件比较麻烦的事。但因为需求确实存在,比如生成分享图,所以即使麻烦,还是挡不住大家研究的动力。
大概有几种思路:
一、直接在小程序的 Canvas 中绘图
这又细分为几种。
一是调用绘图函数,直接在 Canvas 中绘制文字、几何形状。但明显,这种方法过程机械、且支持的样式非常有限。一旦图的样式发生变化,就要重写代码,很麻烦。
一是类似 waml2canvas 之类的工具,遍历 dom 中的元素,自动将元素转换为 Canvas 支持的样式,然后更新。这个方案是很优雅的。遗憾的是,这个方案相当于重写一遍 html2canvas,工作量很大;现在只支持很少的特性,且有 Bug,处于不可用状态。
二、通过 web-view + html2canvas 生成图片
html2canvas 是比较成熟的工具,将 html 中某个 dom 绘制到 canvas。
微信小程序 web-view 可以展示网页,然后在网页中使用 weixin-js 与小程序通信。
不过,这个方案的问题是,将一件事分到几个地方执行,有点割裂;需要一个备案域名 + 云存储/服务器 来放这个页面;web-view 与小程序的通信并不是实时的,而只是比如 web-view 返回时才能通信;如果生成图片需要提示比较多的内容,比如自定义头像,就需要先将图片存储到网页可以访问的地方,是个麻烦事。
三、通过 puppeteer 生成图片
puppeteer 是个无头浏览器,可以实现非常多事情,比如完整呈现页面,然后用截图的方式保存图片。
这个方案的问题是,需要配合服务器或云函数,但在调用时又涉及鉴权,多增加了一件麻烦事。好在,微信云函数也可以做这件事,且无需鉴权。问题在于,要花钱 😂
还有其他的问题,比如上传下载图片,这依赖于网络稳定性和网速。
这几种方案,我都实际测试过,都是可选的。目前,倾向于第 3 种方案。