无头浏览器图像质量-无头Chrome，phantom js，slimer js

我正在寻找有关无头浏览器内幕发生情况的更多信息。过去，我一直在使用不同的无头浏览器，例如slimmerJS，Phantom.js和Headless Chrome，目的是在不同的站点截屏。

我从来没有生成过逼真的，清晰的图像，就像您在浏览器中看到的那样，它看起来像一个工具限制，这就是您可以从中获得的最大质量，但是我想了解为什么以及可能如何做得更好。

请比较以下示例。

在此网站https://en.wikipedia.org/wiki/Main_Page中，在左上角找到Wikipedia徽标。
这是无头的chrome通过操纵up拍摄的徽标的屏幕截图：

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

现在，如果我要使用计算机拍摄屏幕截图，无论是Windows，Mac，Linux，我都会得到质量很好的屏幕截图，看起来完全是真实的交易。

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

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

— 布鲁诺·斯马尔多内
source

将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

— 强硬的
source