0216 - 微信小程序生成图片
source link: https://atjason.com/daily/2023-02-16.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
0216 - 微信小程序生成图片
2023-02-16
| 每天写一点
微信小程序生成图片，是件比较麻烦的事。但因为需求确实存在，比如生成分享图，所以即使麻烦，还是挡不住大家研究的动力。
大概有几种思路：
一、直接在小程序的 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 种方案。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK