项目介绍

公司拉新和分享活动少不了海报的使用，考虑到生成海报是通用工具以及需要处理前端生成海报的各种兼容性问题，我们开发了此项目。一般海报的生成可由客户端生成，也可由服务端生成，该项目是通过 node 服务组合背景、二维码、图片、文字等生成海报图片。

服务端生成海报优缺点

优点：

• 兼容性好，如前端生成时 canvas 经常出现的非同源图片跨域问题不会出现
• 前端开发简单，对于前端来说就是一个参数较多的接口
• 可以做缓存，相同的参数不必每次生成（本项目采用阿里云 oss）

缺点：

• 服务器压力大，一个服务需要同时对多个客户端
• 对于个别的样式支持较差，如果想做到支持更多样式属性，开发成本较高

缺点的完善

上文说到服务端生成的缺点中，最主要的是服务器压力。一旦同时生成的人数或者海报元素过多，就会造成生成海报时间过长、生成海报超时等问题。但是由于我们事先不可能知道有多少用户会使用海报功能，所以使用 FC（函数计算）弹性部署，可以解决这一问题，也不会浪费资源。

阿里云 FC：https://help.aliyun.com/document_detail/52895.html

海报生成设计流程

海报设计时，支持背景图、二维码、文字、图片，生成时先会将请求参数 md5 和 oss 缓存下的 md5 进行比对：

若结果一致则直接根据 md5 找到对应的海报返回；

若 md5 不存在，则会走生成流程，生成海报并将参数 md5 与海报 url 缓存。

• 利用参数 md5 取缓存文件主要代码部分：

其中，Client 为 ali-oss 实例对象，根据是否查询到相应的文件，直接返回至客户端。

• 重新生成海报主要代码：

md5 缓存未取到文件时，则走改代码重新生成海报。Pinterest 为自己封装的一个方法，其使用了一些 npm 包进行数据处理转为图片二进制流，再利用 sharp（node 高性能图片处理）进行合成。这边使用了以下几种包处理数据，分别是：text-to-image（处理文字）、qrcode（二维码）。

• Pinterest 核心代码如下：

使用方式

总结

该项目为 node + fc 部署的海报服务，目前使用感受为第一次生成海报的时间略长，第一次之后速度则会快许多（一般海报生成都会有 loading）。node 开发的服务可以由前端自行修改和优化，对前端工程师来说不依赖于后端，是一件非常自豪的事情。