Come posso catturare schermate del browser a una risoluzione superiore rispetto a quella supportata dal mio browser?


97

Devo fare uno screenshot di un sito Web come apparirebbe su un monitor ad altissima risoluzione ... diciamo 4000x3000 pixel. Lo schermo del mio laptop ha una risoluzione nativa di 1400x768. Fondamentalmente, ho bisogno di simulare avere una risoluzione del monitor molto più elevata rispetto a quella supportata dal mio monitor e dalla mia scheda video. Voglio che lo screenshot del sito abbia un aspetto simile a quando si preme CTRL MINUS (zoom indietro) in Firefox ripetutamente, ma senza perdita di pixel a causa del ridimensionamento. Come posso fare questo? Esiste un modo per utilizzare il software della macchina virtuale per simulare un display ad altissima risoluzione? In caso contrario, c'è un modo per aprire una finestra del browser più grande dello schermo e quindi catturarne il contenuto come PNG in qualche modo? Qualcos'altro che potrebbe funzionare?


Potresti provare a cambiare l'impostazione dpi del tuo sistema operativo. Credo che in Windows 8 sia necessario modificare un valore di registro. Mentre questo ti dà un desktop gigante, ovviamente anche i caratteri si ridimensionano, quindi devi sforzare di più gli occhi per leggere il testo.
jiggunjer,

Risposte:


104

Puoi farlo con Firefox e 2 estensioni: Web Developer e FireShot .

Una volta installate entrambe le estensioni, vai su Strumenti - Sviluppatore Web - Ridimensiona - Modifica dimensioni ridimensionamento ....

Aggiungi una nuova dimensione, 4000 x 3000. seleziona "Ridimensiona la finestra" se vuoi che solo il contenuto della pagina sia 4000x3000. Se non lo controlli, l'intera finestra di Firefox (con barre degli strumenti, menu, ...) verrà impostata su questa dimensione.

testo alternativo

Una volta della dimensione corretta, vai su Strumenti - FireShot - Cattura intera pagina e .... Seleziona un'azione, come Salva ad esempio. Salverà il contenuto della pagina che è stato impostato da Web Developer nella dimensione desiderata.

testo alternativo


@snark - Beh, ha quasi funzionato. Ma sembra che l'estensione Web Developer non mi permetta di rendere il viewport più grande del mio schermo ...?
Joshua Carmody,

@Joshua: funziona bene per me. Ho provato prima di pubblicare la mia risposta. Ho fatto un nuovo test ma non sono riuscito a trovare dove ospitare un'immagine così grande
Snark

1
Aggiornamento: il problema Impossibile creare una finestra più grande dello schermo sembra essere una limitazione imposta dal sistema operativo Windows stesso.
Joshua Carmody,

@snark - Ti dispiace se ti chiedo quale sistema operativo stai eseguendo?
Joshua Carmody,

2
@snark - Ah. Forse è una cosa di Windows XP (questo è quello con cui sono bloccato qui). In ogni caso, posso aggirarlo usando FireBug per inserire un DIV con style = "larghezza: 4000px; altezza: 3000px;" nel codice HTML e quindi utilizzando FireShot, quindi sono ancora bravo. Grazie per aver segnalato FireShot. Questo mi rende la vita molto più semplice. Stavo scorrendo e scattando schermate piuttosto che comporle manualmente prima. È stato un grande dolore.
Joshua Carmody,

19

Nel frattempo (per almeno un anno o due - dalla versione 15, se non sbaglio), Firefox lo supporta direttamente tramite gli strumenti di sviluppo integrati.

Sia colpito CtrlShift Mo selezionare Responsive Visualizzazione Struttura dal Developer Tools icona nel menu stripe.

Verrà visualizzata questa vista, che ti consentirà di scegliere tra una serie di impostazioni predefinite, nonché di immettere qualsiasi risoluzione desiderata e salvare direttamente uno screenshot in formato PNG su disco con un clic:

inserisci qui la descrizione dell'immagine


1
Il pulsante dello screenshot potrebbe non funzionare correttamente durante la simulazione di immagini ad alta risoluzione ingrandendo. In tal caso, apri la barra degli strumenti dello sviluppatore Shift+ F2e incollalo screenshot --clipboard --fullpagenella "console". Questo è diverso dalla normale console JS.
lama

Questo funziona anche con la modalità di test del dispositivo della console di sviluppo di Chrome. L'opzione screenshot è nel menu a discesa in alto a destra.
Tully,

Sfortunatamente questo non sembra funzionare in Chrome; Ho appena provato a fare uno screenshot a tutto schermo in Chrome di un Microsoft Flow (poiché il flusso non verrà visualizzato correttamente in Firefox, anche se il metodo di screenshot a tutto schermo di Firefox funziona) e ha preso solo uno screenshot dello spazio attualmente visualizzato ... in altre parole, non vi era alcuna differenza tra le opzioni "cattura screenshot" di Chrome e "cattura screenshot a schermo intero" ... bummer.
TylerH,


6

Uso un componente aggiuntivo di FireFox chiamato Abduction per creare uno scatto .png di una pagina web nella sua interezza. Sfortunatamente quel componente aggiuntivo non è stato ancora aggiornato per essere compatibile con FireFox 3.6.

Sembra che ScreenGrab farà la stessa cosa.


5

Firefox 16 in poi ora offre la possibilità di controllare le dimensioni del viewport con la console per sviluppatori:

Apri Strumenti ... Web Developer ... Developer Toolbar

Ridimensiona la finestra con questo comando:

resize to 5000 5000

Schermata con questo comando:

screenshot output.png

4

Bene, con una configurazione Linux (o X Window System di qualsiasi tipo) puoi impostare un desktop virtuale più grande del tuo monitor. Ci scorri dentro, ma penso che potresti quindi massimizzare il tuo browser e schermarlo.

Non so se c'è un modo per farlo in Windows o OS X.


3

Trovo che usare servizi online come thumbalizr sia più semplice dell'installazione di plugin del browser, se non è necessario farlo spesso.


1

In Chrome ci sono estensioni gravi come:

C'è un'altra schermata della pagina Web ma non ho la reputazione sufficiente per pubblicare più di due collegamenti

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.