Node中如何用Puppeteer库生成海报

这篇文章主要介绍“Node中如何用Puppeteer库生成海报”，在日常操作中，相信很多人在Node中如何用Puppeteer库生成海报问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Node中如何用Puppeteer库生成海报”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！之前文章写了一下前几天因为使用了 html2canvas 碰到了很多兼容性问题，差点提桶跑路。然后经过评论区大佬们指导，发现了一个操作简单，复用性高的海报生成方案—— Node+Puppeteer生成海报 。主要的设计思路为：访问生成海报的接口，接口通过Puppeteer去访问传入的地址，将对应的元素截图返回。
Puppeteer 生成海报相对于 Canvas 生成的优势有哪些：没有浏览器兼容，平台兼容等问题。代码复用性高，h6、小程序、app的生成海报服务都可以使用。优化操作空间更大。因为改成了接口生成海报的形式，可以使用各种服务端的方式去优化响应速度，比如：加服务器、加缓存Puppeteer 是一个 Nodejs 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行即“无头”模式，但是可以通过修改配置 headless:false 运行“有头”模式。
在浏览器中手动执行的绝大多数操作都可以使用 Puppeteer 来完成！ 下面是一些示例：生成页面 PDF或者截图。抓取 SPA（单页应用）并生成预渲染内容（即“SSR”（服务器端渲染））。自动提交表单，进行 UI 测试，键盘输入等。创建一个时时更新的自动化测试环境。 使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。捕获网站的 timeline trace，用来帮助分析性能问题。测试浏览器扩展。1. 写一个简单的接口Express 是一个简洁而灵活的 node.js Web应用框架。使用express写一个简单的node服务，定义一个接口，接收截图所需的配置项传递给puppeteer。2. 创建一个截图模块打开一个浏览器 => 打开一个标签页 => 截图 => 关闭浏览器puppeteer.launch([options])：启动一个浏览器browser.newPage()：创建一个标签页page.goto(url[, options])：导航到某个页面page.setViewport(viewpo免费云主机、域名rt)：制定打开页面的窗口page.$(selector)：元素选择elementHandle.screenshot([options])：截图。其中encoding属性可以指定返回值是base64或Bufferbrowser.close()：关闭浏览器及标签页3. 优化1. 请求时间优化page.goto(url[, options]) 方法的配置项 waitUntil 表示什么状态下算执行完毕, 默认是load事件触发时。事件包括：如果使用 networkidle0 的方案等待页面完成，会发现接口的响应时间会比较长, 因为 networkidle0 需要等待500ms，真实业务场景下很多情况下不需要等待，所以可以封装一个延时器，可以自定义等待时间。比如我们的海报页只是渲染一个背景图跟一个二维码图片，页面触发 load 时已经加载完成了，不需要等待时间，可以传入0跳过等待时间。如果这种方式不能满足，需要页面在某个时机通知puppeteer结束，还可以使用 page.waitForSelector(selector[, options]) 等待页面某个指定的元素出现。比如：页面执行完某个操作时，插入一个 id=”end” 的元素，puppereer 等待这个元素出现。类似的方法共包括：page.waitForXPath(xpath[, options])：等待 xPath 对应的元素出现在页面中。page.waitForSelector(selector[, options])：等待指定的选择器匹配的元素出现在页面中，如果调用此方法时已经有匹配的元素，那么此方法立即返回。page.waitForResponse(urlOrPredicate[, options])：等待指定的响应结束。page.waitForRequest(urlOrPredicate[, options])：等待指定的响应出现。page.waitForFunction(pageFunction[, options[, …args]])：等待某个方法执行。page.waitFor(selectorOrFunctionOrTimeout[, options[, …args]])：此方法相当于上面几个方法的选择器，根据第一个参数的不同结果不同，比如：传入一个string类型，会判断是不是xpath或者selector，此时相当于waitForXPath或waitForSelector。2. 启动项优化Chromium启动时还会开启很多不需要的功能，可以通过参数禁用某些启动项。3. 复用浏览器因为每次接口被调用都启动了一个浏览器，截图之后关闭了这个浏览器，造成了资源的浪费，并且启动浏览器也需要耗费时间。并且同时启动的浏览器过多，程序还会抛出异常。所以使用了连接池：启动多个浏览器，在其中一个浏览器下创建标签页打开页面，截图完成后只关闭标签页，保留浏览器。下一次请求过来时直接创建标签页，达到复用浏览器的目的。当浏览器使用次数达到一定数目或者一段时间内没有被使用时就关闭这个浏览器。
有大佬已经对generic-pool这个连接池进行了处理，我就直接拿来用了。4. 优化接口防止图片重复生成用同一组参数重复调用时每次都会开启一个浏览器进程去截图，可以使用缓存机制优化重复的请求。可以通过传入唯一的key作为标识位(比如用户id+活动id)，将图片base64存入redis或者写入内存中。当接口被请求时先查看缓存里是否已经生成过，如果生成过就直接从缓存取。否则就走生成海报的流程。到此，关于“Node中如何用Puppeteer库生成海报”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: 如何解析网页文字在DIV+CSS布局中垂直居中的问题

这期内容当中小编将会给大家带来有关如何解析网页文字在DIV+CSS布局中垂直居中的问题，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。网页文字在DIV+CSS布局中垂直居中的问题1.DIV+CSS布局中单行文字设置div的高度…