前端生成海报图技术选型与问题解决

作者：vivo 互联网大前端团队 - Tian Yuhan

本篇文章主要聚焦海报图分享这个形式，探讨纯前端在H5&小程序内，合成海报到下载到本地、分享至社交平台整个流程中可能遇到的问题，以及如何解决。

一、引言

绝大多数的电商平台都会设计分享裂变的功能，激励用户进行分享，这是一种拉新促活的常见措施。提到分享裂变，就免不了需要生成用户专属的分享链接或者专属海报。当然分享推广的形式多种多样，有文本链接、网页链接、图片邀请码、小程序、音视频等等。

本篇文章主要聚焦海报图分享这个形式，探讨纯前端在H5&小程序内，合成海报到下载到本地、分享至社交平台整个流程中可能遇到的问题，以及如何解决。

二、选型参考

2.1 实现方式

根据海报图生成渠道的差异，可以将海报图生成分为：客户端生成、前端生成和服务端生成，以下是从技术实现、兼容性、生成速度和功能受限四个维度进行的对比：

• 对于排版复杂的场景： 建议使用服务端Node.js渲染的方式【如Puppeteer图片生成】；

• 对于排版简单，但用户请求并发大的场景：建议使用前端或客户端生成海报图；

• 对于需多端投放，样式动态更新的场景：建议使用前端生成海报图；

• 对于叠加用户交互的场景：建议使用客户端原生绘制的方式生成。

本篇文章着重聚焦前端H5 & 小程序内生成海报图的技术实现，如果大家对服务端、客户端生成海报图的方案感兴趣，文末有相关链接可供参考。

2.2 H5 生成海报图技术选型

H5 生成海报图常推荐的方案有三种：

（1）html2canvas：基于页面中存在且可用的DOM结构、样式，构建“截图”，绘制到canvas画布中。

下面是html2canvas的技术解析，详细讲解可以参考文末链接。

（2）dom-to-image：将DOM 节点序列化为XML，包装到SVG中，再转为图片。

下面是dom-to-image的技术解析，详细讲解可以参考文末链接。

（3）canvas 纯原生绘制

以下是示例代码，这里不做赘述

html2canvas和dom-to-image都是用于在canvas的基础上封装的库，由于底层实现方式的不同，它们各有优缺点，以下是从几个维度进行的优缺点对比。

那么如何快速