在应用开发过程中,我们会遇到各种各样的分享场景,例如邀请、拉新、分享内容等。分享链接是 Web 时代常见的分享形式,实现也相对容易。但是现在人们时间大都花在了 APP 上,所以应用之间的分享越来越重要,然而应用之间分享链接却不是那么顺利和有效果。往往受以下制约:
-
纯文字链接,依靠文字向外界传达信息,信息量小、可信度低。群里丢了一个链接进来,什么描述都没有,大多数人都不会去点。链接的描述一般也不会太长,信息不会太多。
-
分享的目标应用的外链策略。淘宝购物链接不能分享到微信、营销链接容易被微信封禁,都是受微信外链策略的影响。
-
平台分享机制限制。小程序的转发功能允许用户直接将小程序分享到联系人中,却无法分享到朋友圈。若开发者希望用户可以分享小程序到朋友圈中,通常需要生成分享海报图片,分享图片到朋友圈中。
所以 APP、H5、小程序等应用中分享功能,除了实现分享链接以外,还需要生成分享海报图片,在图片上展现更丰富的内容,一图胜千言。
如何低成本地生成内容丰富的海报图片,就是我们想要解决的问题。
常见技术方案
从生成图片的位置划分,可以将方案划分为两种:客户端生成、服务端生成。
在客户端生成图片是将图片中的元素都下载到本地,然后使用绘图 API 进行绘制,典型方案就是使用 Canvas 来绘制图片。
在服务端生成图片,又可以分为两种,一种是在服务端使用绘图库绘制,然后返回图片或图片链接给客户端;另一种是在服务端使用HTML + CSS 生成带有样式的网页,然后使用无头浏览器截图,返回图片或图片链接给客户端。
简而言之,一般会使用下面这三种方式:
-
在客户端使用 Canvas 生成图片
-
在服务器上使用网页完成样式渲染,然后截图返回给客户端
-
使用后端绘图库绘制,然后返回给客户端
下面逐一分析各种方案生成海报图片的优缺点。
客户端使用 Canvas 生成海报图片
优点:
-
渲染过程在每个客户端中完成,渲染相对独立,基本上不需要考虑并发的问题。
-
Canvas 特性丰富,可以实现样式复杂的图片渲染。
缺点也很明显:
-
上手门槛高,需要灵活使用 Canvas API
-
代码可读性差,调试过程复杂。
-
代码复用程度低,每个端都需要重新编码。客户端型号众多,用户设备上的表现还可能与在开发机上的表现存在差异。兼容性太差,这是客户端渲染最大的痛点。
-
如果有远程图片,可能会因跨域,无法下载,导致绘制失败。
推荐阅读:小程序canvas绘制海报
服务端浏览器,网页截图
在服务器上使用 HTML + CSS 在无头浏览器中完成网页样式布局与内容填充,然后使用无头浏览器提供的截图 API,将生成的网页截图保存。无头浏览器一般会选用 Puppeteer
。
Puppeteer
是谷歌官方团队开发的一个 Node.js 库,它提供了一些 API 用来控制浏览器的行为,比如打开网页、模拟输入、点击按钮、屏幕截图等操作,通过这些 API 可以完成很多有趣的事情,比如本文要讲的海报渲染服务,就会用到屏幕截图功能。
这种方案的优缺点也很明显。
优点:
-
上手简单,只需要了解 HTML 、CSS 就可以
-
代码可读性高,易于调试
-
得力于HTML、CSS,表达力强。只要在网页上能实现,就可以应用到海报图片中。<