怎麼利用Node產生海報？以下這篇文章跟大家介紹一下使用Node Puppeteer產生海報的方法，希望對大家有幫助！
之前文章寫了一下前幾天因為使用了 html2canvas 碰到了很多相容性問題，差點提桶跑路。然後經過評論區大佬們指導，發現了一個操作簡單，復用性高的海報生成方案—— Node Puppeteer生成海報 。
主要的設計思路為：訪問生成海報的接口，接口通過Puppeteer去訪問傳入的地址，將對應的元素截圖返回。
Puppeteer 產生海報相對於 Canvas 產生的優勢有哪些：
Puppeteer 是Nodejs 函式庫，它提供了一個高階API 來透過DevTools 協定控制Chromium 或Chrome。 Puppeteer 預設以 headless 模式運行即「無頭」模式，但可以透過修改配置 headless:false 運行「有頭」模式。 在瀏覽器中手動執行的絕大多數操作都可以使用 Puppeteer 來完成！以下是一些範例：
1. 寫一個簡單的介面
Express 是一個簡潔而靈活的node.js Web應用程式框架。使用express寫一個簡單的node服務，定義一個接口，接收截圖所需的配置項傳遞給puppeteer。
const express = require('express')
const createError = require("http-errors")
const app = express()
// 中间件--json化入参
app.use(express.json())
app.post('/api/getShareImg', (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, '0.0.0.0', () => {
const host = server.address().address;
const port = server.address().port;
console.log('app start listening at http://%s:%s', 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: ['networkidle0']
});
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: 'base64'
});
await browser.close();
return 'data:image/png;base64,'+ base64
} catch (error) {
throw error
}
};##3. 最佳化
1. 請求時間最佳化
page.goto(url[, options]) 方法的設定項waitUntil 表示什麼狀態下算執行完畢, 默認是load事件觸發時。事件包括： await page.goto(url, {
waitUntil: [
'load', //页面“load” 事件触发
'domcontentloaded', //页面 “DOMcontentloaded” 事件触发
'networkidle0', //在 500ms 内没有任何网络连接
'networkidle2' //在 500ms 内网络连接个数不超过 2 个
]
});const waitTime = (n) => new Promise((r) => setTimeout(r, n)); //省略部分代码 await page.goto(opt.url); await waitTime(opt.waitTime || 0);
await page.waitForSelector("#end")2. 启动项优化
Chromium启动时还会开启很多不需要的功能，可以通过参数禁用某些启动项。
const browser = await puppeteer.launch({
headless: true,
slowMo: 0,
args: [
'--no-zygote',
'--no-sandbox',
'--disable-gpu',
'--no-first-run',
'--single-process',
'--disable-extensions',
"--disable-xss-auditor",
'--disable-dev-shm-usage',
'--disable-popup-blocking',
'--disable-setuid-sandbox',
'--disable-accelerated-2d-canvas',
'--enable-features=NetworkService',
]
});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，不用考虑资源跨域，也不用考虑微信浏览器、各种自带浏览器的兼容问题。省下了时间可以让我写这篇文章。其次，我比较担心的还是性能问题，因为只有在分享的动作才会触发，并发较小，目前使用还未暴露出性能的问题，有了解的大佬们可以指导我一下可以进一步优化或者预防的点。
代码
完整代码查看：github
https://github.com/yuwuwu/markdown-code/tree/master/puppeteer%E6%88%AA%E5%9B%BE
更多node相关知识，请访问：nodejs 教程！！
以上是淺析Node怎麼利用Puppeteer庫產生海報（實作方案分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
