Puppeteer 屏幕截图缺少/不可见文本

2023-12-24

我正在使用 puppeteer 保存和下载由浏览器发送到 Express 应用程序的标记和 css 中的图像。 Express 编译模板，只需将 POSTed 标记插入 html shell 并在本地获取 css（安装在 docker 卷上）。

当我直接在 chrome 中渲染 html 和 css 时，所有文本和其他元素都会按预期显示。然而，保存的屏幕截图缺少文本。

当我省略样式时，文本在本地镶边和 puppeteer 保存的图像中以相同的方式呈现。

幕后是否有设定的风格？还有什么可以解释这种差异吗？

EDIT:现在看来，它可能与我的代码中某处未处理的竞争条件有关。在不进行任何更改的情况下，我能够获得预期的图像，但只是有时，而且我还无法弄清楚那些时间有什么不同。

重现步骤

傀儡师版本：0.12.0
平台/操作系统版本：docker/ubuntu
Node.js 版本：8

索引.js：

app.post('/img', function (req, res) {
  const puppeteer = require('puppeteer');
  let css = [];
  let stylesheets = [];
  // 
  // separate out local stylesheets and read contents of the files
  // 
  css = req.body.stylesheets.filter(sheet => {
    return sheet.indexOf('https') === -1 && sheet.indexOf('http') === -1;
  });
  css = css.map(sheet => {
    return fs.readFileSync(path.join(__dirname, sheet));
  });
  // 
  // separate out external stylesheets (bootstrap, etc)
  // 
  stylesheets = req.body.stylesheets.filter(sheet => {
    return sheet.indexOf('https') > -1 || sheet.indexOf('http') > -1;
  });
  //
  // compile template with html & styles
  //
  app.render('img', {
    stylesheets: stylesheets,
    content: req.body.content,
    css: css
  }, function (err, html) {
    console.log('html\n', html);
    (async() => {
      const browser = await puppeteer.launch({args: ['--no-sandbox']});
      const page = await browser.newPage();
      await page.setViewport({width: 1300, height: 1200});
      //
      // load html to chrome
      //
      try {
        const loaded = page.waitForNavigation({
          waitUntil: 'load'
        });
        await page.setContent(html);
        await loaded
      } catch(err) {
        console.log(err);
        res.status(err.status).send('There was an error loading the page.');
      }
      //
      // save image
      //
      const filename = `${req.body.title}.png`;
      const filepath = path.join(__dirname, 'img', filename);
      try {
        await page.screenshot({ path: filepath });
        console.log(`${filename} saved`);
      } catch(err) {
        console.log(err);
        res.status(err.status).send('There was a problem saving the image.');
      }
      res.status(201).send(filename);
    })();
  });
});

img.html（模板）：

<!DOCTYPE html>
<html>
<head>
  <title>{{title}}</title>
  {{#stylesheets}}
  <link rel="stylesheet" type="text/css" href="{{{.}}}">
  {{/stylesheets}}
  {{#css}}
  <style type="text/css">
    {{{.}}}
  </style>
  {{/css}}
</head>
<body>
  {{{content}}}
</body>
</html>

Expected

Without local styles:

With local styles:

Actual

没有本地风格是预料之中的。

With local styles:

您的 docker 映像可能没有必要的字体。那里有很多开源图像（我在这里维护一个：https://github.com/joelgriffith/browserless https://github.com/joelgriffith/browserless）尝试缓解此类常见问题。

这主要是由于基础图像没有合适的字体。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

css

puppeteer