新版病历夹上线时接了一个召回老用户的临时需求,具体内容就是给老用户发一张邀请函,邀请函就是一张图片,然后要求在邀请函上写一些话,大概就是”亲爱的xxx,您已经使用病历夹xxx天,感谢xxx,邀请下载新版“之类的,因为发送给哪些用户不可能固定,固定也不可能做很多图,所以这种有规律的定制图片肯定需要代码来支持,在这里复盘一下我的开发过程。
直观实现
首先,邀请函图片如下:
可以注意到图片中已经有行,第一次实现方法很脑残,就是图片设为background-image,然后在上面写字,内容是从后端请求回来的用户信息与文字模板的拼接,后端实时生成这些都没有问题,但是放到图片上结果肯定是对不齐,而且在我的界面对齐也毫无意义,因为需要适配各种设备。这根本是一种不过脑子的方法。
改进方案
认识到往图上悬浮文字行不通后我又让设计出了个图,这次的图只有上半部分,所以下半部分就可以我来实现。我写了下半部分的样式,加上了边框,加上了阴影效果,文字加上了underline,看起来很完美。
但是一调试还是会有各种问题,文字不是固定样式的,导致下划线根本无法整行,因为整行的话根本无法确定一行有几个字,而且不能保证在用户端正好一屏,要进行各种奇怪的适配。这种方案肯定也是不行的。
最终实现
改了半天我终于发现,我这样做是不行的,最好的解决方案肯定是直接返回一张图片,图片上已经是写好的字,这就要求我必须用代码实现根据具体信息生成定制化的图片,而且这些图片不需要保存,实时生成是最好的。这时我终于从cnode查到了最科学的实现方案:node文字转图片。
贴一下他的解决方案:
解决思路
文字转svg -> svg转png -> 合并图片
相关轮子
- images Node.js 轻量级跨平台图像编解码库,不需要额外安装依赖
- text-to-svg 文字转svg
- svg2png svg转png图片
示例代码
代码比较长,贴个地址:
注意事项
- text-to-svg需要中文字体的支持,不然中文会乱码
其他思路
看到狼叔说也可以用gm画,不过依赖要多一些。
我觉得html2canvas应该也可以,有空试一下。