Puppeteer 屏幕截图缺少/不可见文本 [英] Puppeteer screenshot has missing/invisible text
问题描述
我正在使用 puppeteer 从标记和下载图像由浏览器发送到 Express 应用程序的 css.Express 编译模板，只需将 POSTed 标记插入 html shell &在本地获取 css(安装在 docker 卷上).
I'm using puppeteer to save and download images from markup & css sent to an express app by the browser. Express compiles the template, just inserting the POSTed markup into an html shell & gets the css locally (mounted on a docker volume).
当我呈现 html &css直接在chrome中，所有文本和其他元素都按预期显示.但是，保存的屏幕截图缺少文本.
When I render the html & css directly in chrome, all text and other elements display as expected. The screenshot that is saved, however, is missing the text.
当我忽略我们的样式时，文本在本地 chrome 和puppeteer 保存的图像.
When I leave out our styles, the text renders the same way in both local chrome & the image saved by puppeteer.
幕后是否设置了样式?还有什么可以解释这种差异的原因吗?
Are there styles set behind the scenes? Something else that could account for the difference?
现在看来它可能与我的代码中某处未处理的竞争条件有关.在不进行更改的情况下，我能够获得预期的图像，但只是有时，我还没有弄清楚这些时间有何不同.
It now seems that it might be related to a race condition unhandled somewhere in my code. Without making changes, I was able to get the expected image, but only sometimes and I haven't yet been able to sort out what's different about those times.
- Puppeteer 版本:0.12.0
- 平台/操作系统版本:docker/ubuntu
- Node.js 版本:8
index.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(模板):
img.html (template):
<!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>
预期
没有本地样式:
使用本地样式:
没有本地样式是预期的.
Without local styles is as expected.
使用本地样式:
推荐答案
很可能您的 docker 图像没有必要的字体.有很多开源图像(我在这里维护一个:https://github.com/joelgriffith/无浏览器)尝试缓解此类常见问题.
It's likely that your docker image doesn't have the necessary fonts. There's a lot of open-source images out there (I maintain one here: https://github.com/joelgriffith/browserless) that try and alleviate common problems like this.
这主要是因为基础图片没有合适的字体.
This is mostly its due to the base image not having the appropriate fonts.
这篇关于Puppeteer 屏幕截图缺少/不可见文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
