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

Question

在Firefox中,我可以在访问Web开发人员工具栏时创建全页屏幕截图(可以在开发人员工具设置中激活).不幸的是,我只能使用默认分辨率来执行此操作.有没有机会获得更高分辨率的图像？使用Firefox或附加组件？或者它可以在另一个浏览器中？

Answer 1

在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;
}

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 2

Firefox 62及以下版本

要以原始屏幕分辨率的4倍拍摄屏幕截图,请打开Web控制台(Tools- > Web Developer- > Web Console或CtrlShiftK,CmdOptionK在Mac上)并键入:

:screenshot --dpr 4

文件名现在是可选的,控制台将告诉您文件的保存位置(通常在具有系统特定命名方案的"下载"中).

可以使用其他参数,有关详细信息,请参阅Web控制台文档和Erik Meyer的博客文章.

另外需要注意:大DPR值并不总是有效.似乎有大约120万像素的限制.更大的屏幕截图根本无法完成,无所事事.如果该命令对您没有任何作用,请尝试降低dpr或调整窗口大小,直到找不到为止.

Answer 3

我在超级用户使用正确的参数找到了一个很好的答案.在开发人员控制台中(使用SHIFT + F2打开),使用:

screenshot filename.png --dpr 4

这将使截屏分辨率增加4倍.