无头浏览器图像质量 - Headless chrome、phantom js、slimmer js答案

【问题标题】：Headless browser image quality - Headless chrome, phantom js, slimmer js无头浏览器图像质量 - Headless chrome、phantom js、slimmer js
【发布时间】：2020-12-05 20:20:52
【问题描述】：

我正在寻找更多关于无头浏览器引擎盖下发生的事情的信息。过去我一直在使用不同的无头浏览器，例如slimmerJS、Phantom.js 和Headless Chrome，目的是在不同的网站上截屏。

我从来没有生成与您在浏览器中看到的图像相似的真实、清晰的图像，它看起来像是一个工具限制，例如，这是您可以从中获得的最高质量，但我想了解为什么，以及可能如何让它变得更好。

请比较下面的例子。

在此网站https://en.wikipedia.org/wiki/Main_Page 的左上角找到维基百科徽标。
这是 headless chrome 通过 puppeteer 拍摄的那个标志的屏幕截图：

如果您将真实网站与屏幕截图进行比较，您可以看到图像是如何模糊的。在此示例中，它只是一个图像，但 HTML 文本也会发生这种情况。

现在，如果我用我的电脑截屏，无论是 windows、mac 还是 linux，我都会得到一个质量非常好的截屏，看起来完全像真实的交易。

那么为什么会这样呢？我尝试了所有标准的东西，例如在每个库中设置最高质量的屏幕截图，并设置足够大的视口以使屏幕截图具有不错的分辨率。这真的是您可以从无头浏览器屏幕截图中获得的最高质量吗？

对此领域的任何启示将不胜感激。谢谢！

【问题讨论】：

标签： javascript node.js puppeteer google-chrome-headless webautomation

【解决方案1】：

将 deviceScaleFactor 设置为 2（也就是模拟视网膜）会得到更好的结果：

(async () => {
    const browser = await puppeteer.launch({ headless: false })
    const page = await browser.newPage();
    await page.setViewport({width: 800, height: 800, deviceScaleFactor: 2});
    await page.goto('https://en.wikipedia.org/wiki/Main_Page')

    await page.screenshot({ fullPage: true, path: 'test.png' })
})();

如您所见，您可以获得非常不错的结果：

来源：https://github.com/puppeteer/puppeteer/issues/571

【讨论】：