javascript - Headless 浏览器图像质量 - Headless chrome、phantom js、slimmer js

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

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

请比较下面的例子。

在本网站 https://en.wikipedia.org/wiki/Main_Page 中，在左上 Angular 找到维基百科标志。

这是headless chrome通过puppeteer截取的那个logo的截图:

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

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

那么为什么会发生这种情况呢？我尝试了所有标准的事情，例如在每个库中设置最高质量的屏幕截图，并设置一个足够大的视口(viewport)，以便屏幕截图具有合适的分辨率。这真的是您可以从 headless 浏览器屏幕截图中获得的最高质量吗？

对这方面的任何启示将不胜感激。谢谢!

最佳答案

将 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

关于javascript - Headless 浏览器图像质量 - Headless chrome、phantom js、slimmer js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59506673/