我可以在 Firefox 中创建高分辨率屏幕截图吗？答案

【问题标题】：Can I create high resolution screenshots in Firefox?我可以在 Firefox 中创建高分辨率屏幕截图吗？
【发布时间】：2015-12-21 00:05:04
【问题描述】：

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

【问题讨论】：

更高的分辨率，实际上是指更高的视口尺寸吗？如果是这样，请使用响应式设计视图，并增加显示的尺寸……
@CBroe 不。想象一下，我会用 Firefox 放大图像，然后截屏。假设窗口宽度为 1000px 时缩放 200%，那么我想要一个 2000px 的图像。但应该是整页截图。
听起来像是应该在bugzilla.mozilla.org上提交的文件
@Mike'Pomax'Kamermans 原来是这样，并且得到了修复：bugzilla.mozilla.org/show_bug.cgi?id=1464461

标签： firefox screenshot high-resolution webpage-screenshot

【解决方案1】：

Firefox 62 及以下

在 Firefox 62 及以下版本中，GCLI 已被删除，the screenshot command was moved to the Web Console and prefixed with a colon。

要以原始屏幕分辨率的 4 倍截屏，请打开 Web 控制台（Tools -> Web Developer -> Web Console 或 CtrlShiftK、CmdOptionK（在 Mac 上）并输入：

:screenshot --dpr 4

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

其他参数可用，请参阅the Web Console documentation 和Erik Meyer's blog post 了解更多信息。

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

【讨论】：

“网络控制台”似乎与开发者控制台是分开的。如果我转到普通控制台，screenshot 命令不起作用。似乎只需要js代码。如果我去网页并按下 shift+f2 ，那虽然有效。也许我做错了什么。
@Scribblemacher 您所描述的是 Firefox 62 之前的行为。此答案仅适用于 Firefox 62 及更高版本。您可能有版本 60 ESR，因此此答案不起作用，您应该检查其他答案。
你是对的，这是 60 ESR。不过，Shift+F2 可以让我进入 Web 控制台。截图命令仍然有效。
@Scribblemacher 不，Shift+F2 将您带到开发人员工具栏，即 GCLI。在 Firefox 62 之前，这与 Web 控制台是分开的。它在 Firefox 62 中被删除并且不再存在：现在只存在 Web 控制台。
非常有帮助的答案，谢谢。我已经确认--dpr 8 在我尝试过的页面上确实有“较大的屏幕截图根本无法完成并且什么都不做，默默地做”的不幸行为。只有--dpr 4 似乎始终如一地工作。

【解决方案2】：

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

Shift-F7（或转到“工具”菜单 -> Web Developer -> 样式编辑器）并插入这些行以缩放整个页面（此处为 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 选项，逐个截屏并在图像编辑器中重新组合。

参考：从How can I scale an entire web page with CSS? 得到了第一个技巧：似乎 Firefox 仍然存在缩放 CSS 规则的问题，因此仍然必须添加 -moz-* 规则，至少在版本 38 之前。如果在未来版本中得到更正，只需指定 @987654325 @。

【讨论】：

从 Firefox 62 开始，似乎 Shift+F2 开发者工具已被移除。

【解决方案3】：

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

screenshot filename.png --dpr 4

这会将屏幕截图的分辨率提高 4 倍。

【讨论】：

【解决方案4】：

结合上述答案和 cmets，您可以通过在 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

【讨论】：