使用 Puppeteer 搭建统一海报渲染服务

const crypto = require('crypto');const PuppeteerProvider = require('../../lib/PuppeteerProvider');
const oneDay = 24 * 60 * 60;
class SnapshotController {  /**   * 截图接口   *   * @param {Object} ctx 上下文   */  async postSnapshotJson(ctx) {    const result = await this.handleSnapshot();
    ctx.json(0, 'ok', result);  }
  async handleSnapshot() {    const { ctx } = this;    const { html } = ctx.request.body;    // 根据 html 做 sha256 的哈希作为 Redis Key    const htmlRedisKey = crypto.createHash('sha256').update(html).digest('hex');
    try {      // 首先看海报是否有绘制过的      let result = await this.findImageFromCache(htmlRedisKey);
      // 命中缓存失败      if (!result) {        result = await this.generateSnapshot(htmlRedisKey);      }
      return result;    } catch (error) {      ctx.status = 500;      return ctx.throw(500, error.message);    }  }
  /**   * 判断kv中是否有缓存   *   * @param {String} htmlRedisKey kv存储的key   */  async findImageFromCache(htmlRedisKey) {  }
  /**   * 生成截图   *   * @param {String} htmlRedisKey kv存储的key   */  async generateSnapshot(htmlRedisKey) {    const { ctx } = this;    const {      html,      width = 375,      height = 667,      quality = 80,      ratio = 2,      type: imageType = 'jpeg',    } = ctx.request.body;
    this.validator      .required(html, '缺少必要参数 html')      .required(operatorId, '缺少必要参数 operatorId');
    let imgBuffer;    try {      imgBuffer = await PuppeteerProvider.snapshot({        html,        width,        height,        quality,        ratio,        imageType      });    } catch (err) {      // logger    }
    let imgUrl;
    try {      imgUrl = await this.uploadImage(imgBuffer, operatorId);      // 将海报图片存在 Redis 里      await ctx.kvdsClient.setex(htmlRedisKey, oneDay, imgUrl);    } catch (err) {    }
    return {      img: imgUrl || '',      type: IMAGE_TYPE_MAP.CDN,    };  }
  /**   * 上传图片到七牛   *   * @param {Buffer} imgBuffer 图片buffer   */  async uploadImage(imgBuffer) {    // upload image to cdn and return cdn url  }}
module.exports = SnapshotController;

const browser = await puppeteer.launch({  args: [    '–disable-gpu',    '–disable-dev-shm-usage',    '–disable-setuid-sandbox',    '–no-first-run',    '–no-sandbox',    '–no-zygote',    '–single-process'  ]});

const page = await browser.newPage();page.setContent(html, {  waitUntil: 'networkidle0'});
const imageBuffer = await page.screeshot(options);

page.setContent(html);

page.setContent(html, {  waitUntil: 'networkidle0'});

function waitForNetworkIdle(page, timeout, maxInflightRequests = 0) {  page.on('request', onRequestStarted);  page.on('requestfinished', onRequestFinished);  page.on('requestfailed', onRequestFinished);
  let inflight = 0;  let fulfill;  let promise = new Promise(x => fulfill = x);  let timeoutId = setTimeout(onTimeoutDone, timeout);  return promise;
  function onTimeoutDone() {    page.removeListener('request', onRequestStarted);    page.removeListener('requestfinished', onRequestFinished);    page.removeListener('requestfailed', onRequestFinished);    fulfill();  }
  function onRequestStarted() {    ++inflight;    if (inflight > maxInflightRequests)      clearTimeout(timeoutId);  }
  function onRequestFinished() {    if (inflight === 0)      return;    --inflight;    if (inflight === maxInflightRequests)      timeoutId = setTimeout(onTimeoutDone, timeout);  }}
// Exampleawait Promise.all([  page.goto('https://google.com'),  waitForNetworkIdle(page, 500, 0), // equivalent to 'networkidle0']);

class PuppeteerProvider {  constructor() {    this.browserList = [];  }
    /**   * 初始化`puppeteer`实例   */  initBrowserInstance() {    Array.from({ length: browserConcurrency }, () => {      this.checkBrowserInstance();    });
    // 每隔30分钟刷新一下浏览器    this.refreshTimer = setTimeout(() => this.refreshOneBrowser(), thrityMinutes);  }
  /**   * 检查是否还需要浏览器实例   */  async checkBrowserInstance() {    if (this.needBrowserInstance) {      this.browserList.push(this.launchBrowser());    }  }
  /**   * 定时刷新浏览器   */  refreshOneBrowser() {    clearTimeout(this.refreshTimer);
    const browserInstance = this.browserList.shift();    this.replaceBrowserInstance(browserInstance);
    this.checkBrowserInstance();    // 每隔30分钟刷新一下浏览器    this.refreshTimer = setTimeout(() => this.refreshOneBrowser(), thrityMinutes);  }
  /**   * 替换单个浏览器实例   *   * @param {String} browserInstance 浏览器promise   * @param {String} retries 重试次数，超过这个次数直接关闭浏览器   */  async replaceBrowserInstance(browserInstance, retries = 2) {    const browser = await browserInstance;    const openPages = await browser.pages();
    // 因为浏览器会打开一个空白页，如果当前浏览器还有任务在执行，一分钟后再关闭    if (openPages && openPages.length > 1 && retries > 0) {      const nextRetries = retries - 1;      setTimeout(() => this.replaceBrowserInstance(browserInstance, nextRetries), oneMinute);      return;    }
    browser.close();  }
  launchBrowser(opts = {}, retries = 1) {    return PuppeteerHelper.launchBrowser(opts).then(chrome => {      return chrome;    }).catch(error => {      if (retries > 0) {        const nextRetries = retries - 1;        return this.launchBrowser(opts, nextRetries);      }
      throw error;    });  }}