一种生成高质量用户裂变海报的方法和系统技术方案

本发明专利技术公开了一种生成高质量用户裂变海报的方法，包括步骤：(1)构建海报页面，采集用户信息并生成海报样式；(2)建立海报服务端接口；(3)打开服务端无头浏览器，加载海报页面；(4)无头浏览器拍摄海报截图，并保存或上传到服务器端；(5)服务器端返回生成的远程海报路径给用户。径给用户。径给用户。

【技术实现步骤摘要】
一种生成高质量用户裂变海报的方法和系统


[0001]本专利技术涉及移动通讯，尤其涉及移动端设备与服务器端的通讯。

技术介绍

[0002]目前互联网公司进行用户裂变或者宣传时会使用海报作为载体。一般的宣传使用静态海报即可，但是需要做裂变的需求的时候则需要在静态海报的基础上携带用户的授权信息及落地的页面二维码，这些都是动态的。这就需要合成动态的海报，而用户前端动态生成海报的相关方案目前比较流行的有使用canvas手绘，使用html2canvas组件生成，两者都是前端手段，有比较多的限制与缺点。例如，传统的canvas相关的技术，不具有通用性，针对不同的需求都需要手动编写代码。而且截图在不同设备上宽高不能保持一致。最重要的是其清晰度依托于用户前端的设备性能，难以保证高质量。
[0003]因此，本领域的技术人员致力于开发一种生成高质量用户裂变海报的方法和系统。

技术实现思路

[0004]有鉴于现有技术的上述缺陷，本专利技术所要解决的技术问题是提供一种生成高质量用户裂变海报的方法。
[0005]为实现上述目的，本专利技术首先提供了一种生成高质量用户裂变海报的方法，包括步骤：
[0006](1)构建海报页面，采集用户信息并生成海报样式；
[0007](2)建立海报服务端接口；
[0008](3)打开服务端无头浏览器，加载海报页面；
[0009](4)无头浏览器拍摄海报截图，并保存或上传到服务器端；
[0010](5)服务器端返回生成的远程海报路径给用户。r/>[0011]进一步地，无头浏览器调用puppeteer生成海报的屏幕截图。
[0012]进一步地，服务器端为CDN服务器。
[0013]进一步地，服务器端采用基于express的Node.js服务。
[0014]进一步地，服务器端采用generic
‑
pool进行多浏览器实例控制。
[0015]本专利技术还提供了一种生成高质量用户裂变海报的系统，包括用户端模块和服务端模块，用户端模块包括海报构建子模块和通讯子模块，海报构建子模块用于构建海报页面，采集用户信息并生成海报样式；通讯子模块用于与服务端模块建立海报服务端接口，服务端模块包括无头浏览器子模块和海报拍摄子模块，无头浏览器子模块用于加载海报页面，海报拍摄子模块用于拍摄海报截图，并将其保存或上传到服务器端，服务器端将生成的远程海报路径返回至用户端模块。
[0016]进一步地，无头浏览器子模块通过调用puppeteer生成海报的屏幕截图。
[0017]进一步地，服务器端模块为CDN服务器。
[0018]进一步地，服务器端模块采用基于express的Node.js服务。
[0019]进一步地，服务器端模块采用generic
‑
pool进行多浏览器实例控制。
[0020]本专利技术的方法可以将裂变海报的制作从人工操作转化为接口服务，解放了工程师的工作量，且能够指定生成海报的尺寸，使得在任意设备及终端，生成的海报都一致。通过无头浏览器拍摄截图，生成的图片高清无损，有助于高质量的裂变传播。降低海报的智力成本，一般的工程师即可调用服务。
[0021]以下将结合附图对本专利技术的构思、具体结构及产生的技术效果作进一步说明，以充分地了解本专利技术的目的、特征和效果。
附图说明
[0022]图1是本专利技术的一个较佳实施例中的流程图；
[0023]图2是本专利技术的一个较佳实施例中的建立海报页面的示意图；
[0024]图3是本专利技术的一个较佳实施例中的访问海报服务端接口示意图。
具体实施方式
[0025]以下参考说明书附图介绍本专利技术的多个优选实施例，使其
技术实现思路
更加清楚和便于理解。本专利技术可以通过许多不同形式的实施例来得以体现，本专利技术的保护范围并非仅限于文中提到的实施例。
[0026]不同于现有技术中在用户前端生成海报的方案，本专利技术提供了一种生成高质量用户裂变海报的方法，通过服务端拍摄服务，生成高质量用户裂变海报，用户端只需提供海报的页面和完成标记即可。如图1所示，本专利技术具体包括步骤：
[0027]1.建立海报页面，用于采集用户授权信息并生成包括用户信息和二维码的海报样式。如图2所示。
[0028]2.标记海报页面加载完成。
[0029]3.访问海报服务端接口。如图3所示。
[0030]4.打开服务端无头浏览器。
[0031]5.加载海报页面并等待完成标记。
[0032]6.拍摄海报截图。在本实施例中，在服务器端调用puppeteer生成海报的屏幕截图。
[0033]7.保存或上传生成的海报到CDN服务器端。
[0034]8.返回生成的远程海报路径给用户。
[0035]9.用户展示或者分享。
[0036]其中，标记指的是一个页面的资源都加载完成，包括html、图片等等。加载完成后会在页面写入一个元素，这个元素即完成标记，在服务端的浏览器中会以查找到这个标记的时刻为开始拍摄截图的时刻。
[0037]本专利技术的方法可以将裂变海报的制作从人工操作转化为接口服务，解放了工程师的工作量，且能够指定生成海报的尺寸，使得在任意设备及终端，生成的海报都一致。通过无头浏览器拍摄截图，生成的图片高清无损，有助于高质量的裂变传播。降低海报的智力成本，一般的工程师即可调用服务。
[0038]以上详细描述了本专利技术的较佳具体实施例。应当理解，本领域的普通技术无需创造性劳动就可以根据本专利技术的构思作出诸多修改和变化。因此，凡本
中技术人员依本专利技术的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种生成高质量用户裂变海报的方法，其特征在于，包括步骤：(1)构建海报页面，采集用户信息并生成海报样式；(2)建立海报服务端接口；(3)打开服务端无头浏览器，加载海报页面；(4)无头浏览器拍摄海报截图，并保存或上传到服务器端；(5)服务器端返回生成的远程海报路径给用户。2.如权利要求1所述的生成高质量用户裂变海报的方法，其中，无头浏览器调用puppeteer生成海报的屏幕截图。3.如权利要求1所述的生成高质量用户裂变海报的方法，其中，服务器端为CDN服务器。4.如权利要求1所述的生成高质量用户裂变海报的方法，其中，服务器端采用基于express的Node.js服务。5.如权利要求1所述的生成高质量用户裂变海报的方法，其中，服务器端采用generic
‑
pool进行多浏览器实例控制。6.一种生成高质量用户裂变海报的系统，其特征在于，包括用户端模块和服务端模块，用户端模块...

【专利技术属性】
技术研发人员：马技超，陈玮强，庞猛，
申请(专利权)人：杭州菲助科技有限公司，
类型：发明
国别省市：