題 如何以高於瀏覽器支持的分辨率獲取瀏覽器屏幕截圖?


我需要截取一個網站的截圖,因為它會出現在一個非常高分辨率的顯示器上...比如4000x3000像素。我的筆記本電腦屏幕的原始分辨率為1400x768。基本上,我需要模擬顯示器分辨率遠高於我的顯示器和顯卡實際支持。我希望網站的屏幕截圖看起來幾乎是如何在Firefox中重複按CTRL MINUS(縮小),但由於縮放而沒有任何像素丟失。我怎樣才能做到這一點?有沒有辦法使用虛擬機軟件來模擬超高分辨率顯示?如果沒有,是否有某種方法可以打開比屏幕更大的瀏覽器窗口,然後以某種方式將其內容捕獲為PNG?還有什麼可能有用嗎?


95
2018-03-15 19:12


起源


您可能嘗試切換操作系統的dpi設置。我相信在Windows 8中它需要更改註冊表值。雖然這為您提供了一個巨大的桌面,但字體當然也會縮放,因此您必須更加努力地閱讀文本。 - jiggunjer


答案:


你可以用Firefox和2個擴展來做到這一點: Web開發人員 和 FireShot的

安裝完兩個擴展後,轉到工具 - Web開發人員 - 調整大小 - 編輯調整大小尺寸....

添加新大小,4000 x 3000.如果只想要頁面內容為4000x3000,請選中“調整視口大小”。如果您不檢查它,Firefox的完整窗口(帶有工具欄,菜單,...)將設置為此維度。

alt text

一旦尺寸正確,請轉到工具 - FireShot - 捕獲整頁和.... 選擇一個操作,例如Save for instance。它會將Web Developer設置的頁面內容保存到所需的大小。

alt text


104
2018-03-15 21:13



@snark - 嗯,那個 幾乎 工作。但似乎Web Developer擴展程序不允許我使視口比我的屏幕更大......? - Joshua Carmody
@Joshua:對我來說很好。我在發布答案之前測試過。我做了一個新的測試,但找不到在哪裡舉辦如此大的圖片 - Snark
更新:無法製作窗口大於屏幕的問題似乎是Windows操作系統本身的限制。 - Joshua Carmody
@snark - 你介意我問你在運行什麼操作系統嗎? - Joshua Carmody
@snark - 啊。也許這是一個Windows XP的東西(這就是我在這裡堅持的)。在任何情況下,我都可以通過使用FireBug插入一個樣式=“width:4000px; height:3000px;”的DIV來解決它。進入HTML代碼,然後使用FireShot,所以我仍然很好。謝謝你指出FireShot。這讓我的生活變得更輕鬆。我之前一直在滾動並截取屏幕截圖,而不是手動合成它們。這是一個主要的痛苦。 - Joshua Carmody


同時(至少一年或兩年 - 自第15版以來,如果我沒有記錯的話),Firefox通過集成的開發人員工具直接支持這一點。

要么打了 按Ctrl轉移  中號 或選擇 響應式設計視圖 來自 開發者工具 條紋菜單中的圖標。

這將顯示此視圖,您可以從一組預設中進行選擇以及輸入任何所需的分辨率  只需點擊一下,即可將PNG格式的屏幕截圖直接保存到磁盤:

enter image description here


19
2018-06-22 11:59



當您通過放大模擬hi-dpi圖像時,屏幕截圖按鈕可能無法正常工作。在這種情況下,打開開發人員工具欄 Shift + F2 並粘貼 screenshot --clipboard --fullpage 進入“控制台”。這與常規JS控制台不同。 - blade
這也適用於chrome開發人員控制台設備測試模式。屏幕截圖選項位於右上角的下拉菜單中。 - Tully
不幸的是,這似乎不適用於Chrome;我只是嘗試在Microsoft Flow的Chrome中獲取全視圖截圖(因為即使Firefox的全視口截圖方法有效,Flow也無法在Firefox中正常顯示)並且它只截取了當前查看空間的屏幕截圖...換句話說,Chrome的“捕捉截圖”和“捕捉全尺寸截圖”選項之間沒有區別......真糟糕。 - TylerH


在Mac上, 狗仔隊 可以幫助,使用其GUI或使用URL語法,如:

狗仔隊:(寬度= 4000,高度= 3000,maxheight = 3000)如何以高於瀏覽器支持的分辨率獲取瀏覽器屏幕截圖?

enter image description here

URL語法很容易 變成了一個書籤。 Paparazzi使用WebKit渲染引擎。


8
2018-06-10 21:58





我使用FireFox添加調用  完整地創建一個網頁的.png鏡頭。不幸的是,添加尚未更新為與FireFox 3.6兼容。

好像 ScreenGrab 會做同樣的事情。


5
2018-03-15 22:20





Firefox 16以後現在包含使用開發人員控制台控制視口大小的功能:

打開工具... Web Developer ...開發人員工具欄

使用以下命令調整視口大小:

resize to 5000 5000

使用此命令捕獲屏幕:

screenshot output.png

5
2017-08-17 02:55





好吧,使用Linux(或任何風格的X Window系統設置),您可以設置一個比您的顯示器大的虛擬桌面。你在它中滾動,但我認為你可以最大化你的瀏覽器和屏幕截圖。

我不知道是否有辦法在Windows或OS X中執行此操作。


4
2018-03-15 21:12





我發現使用像在線服務 thumbalizr 如果您不需要經常這樣做,那麼比安裝瀏覽器插件更容易。


3
2018-06-07 13:51