javascript - 无头浏览器图像质量 - Headless chrome、phantom js、slimmer js
问题描述
我正在寻找更多关于无头浏览器引擎盖下发生的事情的信息。过去我一直在使用不同的无头浏览器,例如slimmerJS、Phantom.js和Headless Chrome,目的是在不同的网站上截取屏幕截图。
我从来没有生成一个看起来像你在浏览器中看到的那样真实、清晰的图像,它看起来像一个工具限制,比如,这是你可以从中获得的最高质量,但我想了解为什么,以及可能,如何让它变得更好。
请比较以下示例。
- 在此网站https://en.wikipedia.org/wiki/Main_Page中,在左上角找到 Wikipedia 徽标。
- 这是 headless chrome 通过 puppeteer 截取的那个标志的截图:
如果您将真实网站与屏幕截图进行比较,您可以看到图像是如何模糊的。在此示例中,它只是一个图像,但 HTML 文本也会发生这种情况。
现在,如果我要使用我的电脑截屏,无论是 windows、mac 还是 linux,我都会得到一个质量非常好的截屏,看起来完全像真的一样。
那么为什么会这样呢?我尝试了所有标准的东西,例如在每个库中设置最高质量的屏幕截图,并设置足够大的视口以使屏幕截图具有不错的分辨率。这真的是您可以从无头浏览器屏幕截图中获得的最高质量吗?
对此领域的任何启示将不胜感激。谢谢!
解决方案
将 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' })
})();
如您所见,您可以获得非常不错的结果:
推荐阅读
- reactjs - 如何更新从处于状态的空数组中提取的输入值?
- node.js - app.post 不工作,使用 console.log 不打印任何内容。感谢你的帮助。(学习速递节点JS)
- diameter-protocol - 海鸥流量生成器。AVP 长度
- c++ - 为什么 Visual Studio 找不到我的头文件?
- r - 使用 R 将文件夹和所有子文件夹中的所有 PDF 复制到新文件夹
- r - ggspectro seewave 不能使用填充层
- shopify - Shopify 主题编辑器 + Vue3.x:如何将新的部分设置值传递给 Vue 应用程序?
- c++ - 为什么在 OpenGL 中使用 FreeType 渲染文本时,较高的字母会出现变形?
- ios - 迁移到 M1 Mac 后在 iOS 上运行 Flutter App 时出错
- python-3.x - 将 ax.twinx() 与 sns.FacetGrid 和 sns.lineplot 一起使用