淺析Node怎麼利用Puppeteer庫產生海報（實作方案分享）-js教程-PHP中文網

怎麼利用Node產生海報？以下這篇文章跟大家介紹一下使用Node Puppeteer產生海報的方法，希望對大家有幫助！

淺析Node怎麼利用Puppeteer庫產生海報（實作方案分享）

之前文章寫了一下前幾天因為使用了 html2canvas 碰到了很多相容性問題，差點提桶跑路。然後經過評論區大佬們指導，發現了一個操作簡單，復用性高的海報生成方案—— Node Puppeteer生成海報 。

主要的設計思路為：訪問生成海報的接口，接口通過Puppeteer去訪問傳入的地址，將對應的元素截圖返回。

Puppeteer 產生海報相對於 Canvas 產生的優勢有哪些：

沒有瀏覽器相容，平台相容等問題。
程式碼重複使用性高，h5、小程式、app的生成海報服務都可以使用。
優化操作空間更大。因為改成了介面產生海報的形式，可以使用各種服務端的方式去優化回應速度，例如：加伺服器、加上快取

puppeteer介紹

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。

const express = require(&#39;express&#39;)
const createError = require("http-errors")
const app = express()
// 中间件--json化入参
app.use(express.json())
app.post(&#39;/api/getShareImg&#39;, (req, res) => {
    // 业务逻辑
})
// 错误拦截
app.use(function(req, res, next) {
    next(createError(404));
});
app.use(function(err, req, res, next) {
    let result = {
        code: 0,
        msg: err.message,
        err: err.stack
    }
    res.status(err.status || 500).json(result)
})
// 启动服务监听7000端口
const server = app.listen(7000, &#39;0.0.0.0&#39;, () => {
    const host = server.address().address;
    const port = server.address().port;
    console.log(&#39;app start listening at http://%s:%s&#39;, host, port);
});

登入後複製

2. 建立一個截圖模組

開啟一個瀏覽器=> 開啟一個標籤頁=>截圖=> 關閉瀏覽器

const puppeteer = require("puppeteer");

module.exports = async (opt) => {
    try {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        await page.goto(opt.url, {
            waitUntil: [&#39;networkidle0&#39;]
        });
        await page.setViewport({
            width: opt.width,
            height: opt.height,
        });
        const ele = await page.$(opt.ele);
        const base64 = await ele.screenshot({
            fullPage: false,
            omitBackground: true,
            encoding: &#39;base64&#39;
        });
        await browser.close();
        return &#39;data:image/png;base64,&#39;+ base64
    } catch (error) {
        throw error
    }
};

登入後複製

puppeteer.launch([options])：啟動一個瀏覽器
browser.newPage()：建立一個標籤頁
#page.goto (url[, options])：導覽至某個頁面
page.setViewport(viewport)：制定開啟頁面的視窗
page.$(selector)：元素選擇
elementHandle.screenshot([options])：截圖。其中encoding屬性可以指定回傳值是base64或Buffer
browser.close()：關閉瀏覽器及標籤頁

##3. 最佳化

1. 請求時間最佳化

page.goto(url[, options]) 方法的設定項waitUntil 表示什麼狀態下算執行完畢, 默認是load事件觸發時。事件包括：

 await page.goto(url, {
     waitUntil: [
         &#39;load&#39;, //页面“load” 事件触发
         &#39;domcontentloaded&#39;, //页面 “DOMcontentloaded” 事件触发
         &#39;networkidle0&#39;, //在 500ms 内没有任何网络连接
         &#39;networkidle2&#39; //在 500ms 内网络连接个数不超过 2 个
     ]
 });

登入後複製

如果使用networkidle0 的方案等待頁面完成，會發現介面的回應時間會比較長, 因為networkidle0 需要等待500ms，真實業務場景下很多情況下不需要等待，所以可以封裝一個延時器，可以自訂等待時間。例如我們的海報頁只是渲染一個背景圖跟著一個二維碼圖片，頁面觸發 load 時已經載入完成了，不需要等待時間，可以傳入0跳過等待時間。

 const waitTime = (n) => new Promise((r) => setTimeout(r, n));
 //省略部分代码
 await page.goto(opt.url);
 await waitTime(opt.waitTime || 0);

登入後複製

如果這種方式不能滿足，需要頁面在某個時機通知puppeteer結束，還可以使用 page.waitForSelector(selector[, options]) 等待頁面某個指定的元素出現。例如：頁面執行完某個動作時，插入一個 id="end" 的元素，puppereer 等待這個元素出現。

 await page.waitForSelector("#end")

登入後複製

類似的方法共包括：

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启动时还会开启很多不需要的功能，可以通过参数禁用某些启动项。

    const browser = await puppeteer.launch({
        headless: true,
        slowMo: 0,
        args: [
            &#39;--no-zygote&#39;,
            &#39;--no-sandbox&#39;,
            &#39;--disable-gpu&#39;,
            &#39;--no-first-run&#39;,
            &#39;--single-process&#39;,
            &#39;--disable-extensions&#39;,
            "--disable-xss-auditor",
            &#39;--disable-dev-shm-usage&#39;,
            &#39;--disable-popup-blocking&#39;,
            &#39;--disable-setuid-sandbox&#39;,
            &#39;--disable-accelerated-2d-canvas&#39;,
            &#39;--enable-features=NetworkService&#39;,
        ]
    });

登入後複製

3. 复用浏览器

因为每次接口被调用都启动了一个浏览器，截图之后关闭了这个浏览器，造成了资源的浪费，并且启动浏览器也需要耗费时间。并且同时启动的浏览器过多，程序还会抛出异常。所以使用了连接池：启动多个浏览器，在其中一个浏览器下创建标签页打开页面，截图完成后只关闭标签页，保留浏览器。下一次请求过来时直接创建标签页，达到复用浏览器的目的。当浏览器使用次数达到一定数目或者一段时间内没有被使用时就关闭这个浏览器。有大佬已经对generic-pool这个连接池进行了处理，我就直接拿来用了。

const initPuppeteerPool = () => {
 if (global.pp) global.pp.drain().then(() => global.pp.clear())
 const opt = {
   max: 4,//最多产生多少个puppeteer实例 。
   min: 1,//保证池中最少有多少个puppeteer实例存活
   testOnBorrow: true,// 在将实例提供给用户之前，池应该验证这些实例。
   autostart: false,//是不是需要在池初始化时初始化实例
   idleTimeoutMillis: 1000 * 60 * 60,//如果一个实例60分钟都没访问就关掉他
   evictionRunIntervalMillis: 1000 * 60 * 3,//每3分钟检查一次实例的访问状态
   maxUses: 2048,//自定义的属性：每一个 实例 最大可重用次数。
   validator: () => Promise.resolve(true)
 }
 const factory = {
   create: () =>
     puppeteer.launch({
       //启动参数参考第二条
     }).then(instance => {
       instance.useCount = 0;
       return instance;
     }),
   destroy: instance => {
     instance.close()
   },
   validate: instance => {
     return opt.validator(instance).then(valid => Promise.resolve(valid && (opt.maxUses <= 0 || instance.useCount < opt.maxUses)));
   }
 };
 const pool = genericPool.createPool(factory, opt)
 const genericAcquire = pool.acquire.bind(pool)
 // 重写了原有池的消费实例的方法。添加一个实例使用次数的增加
 pool.acquire = () =>
   genericAcquire().then(instance => {
     instance.useCount += 1
     return instance
   })

 pool.use = fn => {
   let resource
   return pool
     .acquire()
     .then(r => {
       resource = r
       return resource
     })
     .then(fn)
     .then(
       result => {
         // 不管业务方使用实例成功与后都表示一下实例消费完成
         pool.release(resource)
         return result
       },
       err => {
         pool.release(resource)
         throw err
       }
     )
 }
 return pool;
}
global.pp = initPuppeteerPool()

登入後複製

4. 优化接口防止图片重复生成

用同一组参数重复调用时每次都会开启一个浏览器进程去截图，可以使用缓存机制优化重复的请求。可以通过传入唯一的key作为标识位(比如用户id+活动id)，将图片base64存入redis或者写入内存中。当接口被请求时先查看缓存里是否已经生成过，如果生成过就直接从缓存取。否则就走生成海报的流程。

结尾

这个方案目前已经开始在项目里试运行了，这对于我一个前端开发来说简直太友好了，再也不用在小程序里一步一步去绘制canvas，不用考虑资源跨域，也不用考虑微信浏览器、各种自带浏览器的兼容问题。省下了时间可以让我写这篇文章。其次，我比较担心的还是性能问题，因为只有在分享的动作才会触发，并发较小，目前使用还未暴露出性能的问题，有了解的大佬们可以指导我一下可以进一步优化或者预防的点。

代码