我可以在 Firefox 中创建高分辨率屏幕截图吗？ [已关闭]

Question

在 Firefox 中，当我转到 Web 开发人员工具栏时，我可以创建全页屏幕截图（可以在开发人员工具设置中激活）。不幸的是，我只能使用默认分辨率来做到这一点。无论如何，是否有机会获得更高分辨率的图像？使用 Firefox 或附加组件？或者在其他浏览器中可以吗？

Answer 1

Firefox 62 及以下版本

在 Firefox 62 及后续版本中，GCLI 已被删除，并且 屏幕截图命令已移至 Web 控制台并带有冒号前缀。

要以本机屏幕分辨率的 4 倍拍摄屏幕截图，请打开 Web 控制台 (

☰

->

More tools

->

Web Developer Tools

->

Console

或 CtrlShiftK、Cmd Mac 上的 OptionK 或 F12 ->

Console

选项卡）并输入：

:screenshot --dpr 4

文件名现在是可选的，控制台会告诉您文件的保存位置（通常在“下载”中，采用系统特定的命名方案）。

还有其他可用参数，请参阅 Web 控制台文档和 Erik Meyer 的博客文章了解更多信息。

附加说明：较大的 DPR 值并不总是有效。似乎有 120 兆像素左右的限制。较大的屏幕截图根本无法完成并且什么也不做，默默地。如果该命令对您没有任何帮助，请尝试降低 dpr 或调整窗口大小，直到您得到一些结果。

Answer 2

在 Firefox 中，我使用这些技巧：

• Shift-F7（或转到“工具”菜单 -> Web 开发人员 -> 样式编辑器）并插入这些行来缩放整个页面（此处为 4 或 400%，例如 72dpi 变为 288dpi，我们更接近可打印的图片）：

body {
  zoom: 4;  /* change zoom factor here... */
  -moz-transform: scale(4);  /* ...and here. */
  -moz-transform-origin: 0 0;
}

• 然后 Shift+F2（或“工具”> Web 开发人员> 开发人员工具栏），然后在底部的小提示中：

screenshot --fullpage
// or, directly into the clipboard instead of a png in the download folder
screenshot --fullpage --clipboard

您还可以使用“工具”>“Web 开发人员”>“响应式设计视图”（或 Ctrl+Shift+M），它允许您指定自定义分辨率并有一个漂亮的按钮来截取屏幕截图，但缩放仍然必须手动完成.

选择缩放系数时请注意：如果您尝试生成太大的 PNG，Firefox 会变得脾气暴躁。在非常高分辨率的情况下，您将必须删除 --fullpage 选项，逐个屏幕截图并在图像编辑器中重新组装。

参考： 从如何使用 CSS 缩放整个网页？得到了第一个技巧：Firefox 似乎仍然存在缩放 CSS 规则的问题，因此仍然需要添加

-moz-*

规则，至少到版本 38 为止。如果这在未来版本中得到纠正，只需指定

zoom: NN;

。

Answer 3

我在超级用户使用正确的参数找到了一个很好的答案。 在开发者控制台中（使用 SHIFT+F2 打开）使用：

screenshot filename.png --dpr 4 这会将屏幕截图分辨率提高 4 倍。

Answer 4

结合以上答案和评论，您可以通过在 Firefox 中点击

shift + F2

 来获得整个网页的分辨率不错的屏幕截图。然后，当屏幕底部弹出控制台时，输入：

screenshot --fullpage --dpr 4 filename.png

在 Windows 10 上，默认情况下会将

filename.png

 保存到您的 

C:\Users\yourusername\Downloads

 文件夹中。要指定您需要加倍反斜杠：

screenshot --fullpage --dpr 4 C:\\Users\\yourusername\\path\\to\\filename.png