GX博客

const {Cluster} = require('puppeteer-cluster');
const puppeteer = require('puppeteer');
const {args} = require('./config/chrome');

// 全局创建 puppeteer 集群池
(async () => {
  const options = {
    args,
  };
  // 非开发环境使用外部 Chrome 程序，往往是容器内安装的 Chrome
  if (process.env.NODE_ENV !== undefined) {
    options.executablePath = 'google-chrome-unstable';
  }
  const cluster = await Cluster.launch({
    concurrency: Cluster.CONCURRENCY_PAGE,
    maxConcurrency: 16,
    monitor: false,
    retryLimit: 0,
    // puppeteer 启动参数
    puppeteerOptions: options,
    puppeteer,
  });
  cluster.on('taskerror', (err, data, willRetry) => {
    console.error(err);
  });
  global.cluster = cluster;
})();

const args = [
    '--disable-gpu', // 禁用 GPU 硬件加速。 如果软件渲染器没有到位，那么 GPU 进程将不会启动。
    '--disable-background-networking', // 禁用几个在后台运行网络请求的子系统。 这是在进行网络性能测试时使用，以避免测量中的噪声。
    '--disable-breakpad', // 禁用崩溃报告。
    '--disable-component-update', // 禁用组件更新？
    '--disable-dev-shm-usage', // /dev/shm 分区在某些 VM 环境中太小，导致 Chrome 失败或崩溃（参见 http://crbug.com/715363）。 使用此标志来解决此问题（将始终使用临时目录来创建匿名共享内存文件）。
    '--disable-domain-reliability', // 禁用域可靠性监控。
    '--disable-extensions', // 禁用扩展
    '--disable-features=AudioServiceOutOfProcess', // 禁用音频沙盒功能
    '--disable-hang-monitor', // 禁止在渲染器进程中挂起监视器对话框。(选项卡允许直接关闭)
    '--disable-ipc-flooding-protection', // 禁用 IPC 泛洪保护。 默认情况下已激活。 一些 javascript 函数可用于使用 IPC 淹没浏览器进程。 这种保护限制了它们的使用速率。
    '--disable-notifications', // 禁用 Web 通知和推送 API。
    '--disable-popup-blocking', // 禁用弹出窗口阻止。
    '--disable-print-preview', // 禁用打印预览
    '--disable-prompt-on-repost', // 禁用 prompt。此开关一般在自动化测试期间使用。
    // '--disable-renderer-backgrounding', // 禁止后台渲染
    '--disable-setuid-sandbox', // 禁用 setuid 沙箱（仅限 Linux）
    '--disable-speech-api', // 禁用 Web Speech API（语音识别和合成）。
    '--hide-scrollbars', // 从屏幕截图中隐藏滚动条。
    '--metrics-recording-only', // 启用指标记录，但禁用报告。
    '--mute-audio', // 静音音频
    '--no-default-browser-check', // 禁用默认浏览器检查。
    '--no-first-run', // 跳过首次运行任务
    '--no-pings', // 不发送超链接审核 ping
    '--no-sandbox', // 禁用沙箱
    '--no-zygote', // 禁止使用 zygote 进程来派生子进程。 相反，子进程将被 fork 并直接执行。
    '--password-store=basic', // 使用基础的密码保存
    // '--use-gl=swiftshader', // 选择 GPU 进程应使用的 GL 实现。使用 SwiftShader 软件渲染器
    '--use-mock-keychain', // 使用 mock-keychain 防止提示权限提示
];

module.exports = async (ctx, next) => {
    // 省略部分次要代码.....                            
    try {
        const image = await new Promise((resolve) => {
            // 从全局 puppeteer 集群中获得页面实例
            global.cluster.queue(null, async ({page}) => {
                // 1、页面初始化
                await page.setViewport({
                    width: Number(viewportWidth) * Number(scale),
                    height: Number(viewportHeight) * Number(scale),
                });

                // 亦可以为页面设置特定 ua
                if (ua) {
                    await page.setUserAgent(ua);
                }

                // 2、以请求头方式注入数据
                await page.setExtraHTTPHeaders({
                    'render-data': data ? encodeURIComponent(JSON.stringify(data)) : '',
                });
                // 这里考虑 window 的 onload 和 document 的 DOMContentLoaded 事件触发后，认为导航已经完成
                await page.goto(url, { waitUntil: [
                    'load',
                    'domcontentloaded',
                ]});

                // 3、截屏
                let image;
                const baseOptions = {
                    type,
                    fullPage: isFullPage,
                    // 允许 jpeg 格式设置图片质量，以优化图片大小
                    quality: type === 'jpeg' ? Number(quality) : undefined,
                }
                if (responseWithBase64) {
                    image = await page.screenshot({
                        encoding: 'base64',
                        ...baseOptions,
                    });
                } else {
                    const binary = await page.screenshot({
                        encoding: 'binary',
                        ...baseOptions,
                    });
                    image = binary;
                }
                resolve(image);
            });
        });
        if (responseWithBase64) {
            // 以 base64 方式响应给客户端
            ctx.body = {
            ...responseCodeMsg.SUCCESS,
            data: {
                base64: image,
            },
            };
        } else {
            // 设置禁用缓存的响应头
            setNoCacheHeaders(ctx);
            if (ctx.method === 'POST') {
                ctx.type = `application/octet-stream`;
            } else {
                ctx.type = `image/${type}`;
            }
            ctx.body = image;
        }
    } catch (e) {
        // 异步错误日志写入
        ctx.logger.error(`${ctx.path} ${e.toString()}`);
        ctx.status = 500;
        ctx.body = {
            ...responseCodeMsg.BASE_ERROR,
            msg: e.toString(),
        };
    }
};

const Koa = require("koa");
const app = new Koa();

app.use((ctx, next) => {
    ctx.state.data = {};
    if (
        ctx.request.headers && 
        ctx.request.headers["render-data"] && 
        ctx.request.headers["render-data"] !== 'undefined'
    ) {
      ctx.state.data = JSON.parse(
        decodeURIComponent(ctx.request.headers["render-data"])
      );
    }
    return next();
})

const Koa = require("koa");
const app = new Koa();
const views = require("koa-views");
const minify = require("html-minifier").minify;
const path = require("path");

app.use(
    views(path.join(__dirname, "/views"), {
      options: {
        cache: process.env.NODE_ENV !== undefined,
        settings: { views: path.join(__dirname, "views") },
        partials: {
          layout: path.join(__dirname, "views/layout.hbs"),
        },
        helpers: {
          minify: (content, options) => {
            return minify(options.fn(content), {
              includeAutoGeneratedTags: true,
              removeAttributeQuotes: true,
              removeComments: true,
              removeRedundantAttributes: true,
              removeScriptTypeAttributes: true,
              removeStyleLinkTypeAttributes: true,
              sortClassName: true,
              useShortDoctype: true,
              collapseWhitespace: true,
              minifyCSS: true,
            });
          },
        },
      },
      map: { hbs: "handlebars" },
      extension: "hbs",
    })
)

{{#if renderData.headUrl}}
<img src="{{ renderData.headUrl }}" class="avatar" onerror="javascript:this.src='{{ avatar }}';" />
{{else}}
<img src="{{ avatar }}" class="avatar" />
{{/if}}