Come fare uno screenshot che include un elemento di scorrimento all'interno di una pagina Web in Firefox?

70

Devo fare uno screenshot di un'intera pagina web. Il trucco è che ho bisogno dello screenshot per includere l'intero contenuto di un singolo elemento che non si adatta allo schermo.

È una tabella a colonna singola che ha una barra di scorrimento per la sua altezza. Non è un IFRAME (che sarebbe semplice da caricare nella propria scheda).

La colonna contiene testo formattato e alcune piccole immagini.

Per le pagine Web lunghe che scorrono, è banale eseguire questa attività. Ma come può essere realizzato quando contiene un singolo elemento all'interno della pagina che scorre?

Per essere chiari, devo catturare l'intera pagina, non solo l'elemento stesso.

Vorrei realizzare questo usando Firefox su Windows.

windows  firefox  scrolling  screenshot  capture 
— RockPaperLizard
fonte
2
Hai mai pensato di salvare la pagina come PDF? Il problema con questo metodo è che alcuni siti Web hanno una "visualizzazione di stampa" che è ciò che il PDF conterrà, ma in alcuni casi questa tecnica può funzionare.
— Jake Gould,
@JakeGould Grazie Jake. Funzionerebbe con lo scorrimento e l'elemento all'interno di una pagina?
— RockPaperLizard,
Welp, ho perso la parte sull'elemento a scorrimento. È troppo idiosincratico per commentare, quindi tutto quello che posso dire è che non posso essere sicuro ora che il metodo di stampa PDF funzionerà. Buona fortuna con altre idee presentate qui.
— Jake Gould il
— un CVn
Se ho capito bene, l'elemento di scorrimento in questione è probabilmente costretto a meno della sua altezza massima. L'impostazione dell'attributo dello stile dell'altezza su auto su quell'elemento può essere d'aiuto.
— Tehwalris,

Risposte:

86

Il mio suggerimento è di utilizzare la funzione integrata di Firefox che consente di acquisire schermate di un singolo elemento DOM.

Basta aprire gli strumenti di sviluppo → Trova l'elemento → Fare clic con il pulsante destro del mouse e acquisire uno screenshot

inserisci qui la descrizione dell'immagine

Non ha funzionato su uno dei miei siti interni, quindi non posso dire che funzionerà per tutti.

Aggiornamento dopo la modifica di OP:

Se hai intenzione di registrare l'intera pagina insieme a tutto il contenuto dell'elemento DOM come mostrato di seguito, dovresti modificare l'altezza dell'elemento DOM ma ...

inserisci qui la descrizione dell'immagine

Spingerà molti elementi DOM fuori dal viewport e dallo screenshot o AFAIK qualsiasi altro strumento non lo catturerà, il che batte il tuo scopo credo.

Leggi di seguito da https://en.wikipedia.org/wiki/Screenshot

Uno screenshot, una cattura dello schermo, un cappuccio dello schermo, un cappuccio, un dump dello schermo o uno screengrab è un'immagine presa da una persona per registrare gli elementi visibili visualizzati sul monitor, sulla televisione o su un altro dispositivo di output visivo in uso.

Se dovessi davvero farlo a modo tuo, o creerei una GIF o prenderei due screenshot una pagina intera e solo un altro elemento DOM per unirmi in uno.

— gioco di parole
fonte
Grazie mille per la tua risposta (e ottima immagine!), Ma sfortunatamente questo non risponde alla domanda. Devo fare uno screenshot dell'intera pagina incluso l'elemento, non solo dell'elemento stesso.
— RockPaperLizard,
5
@RockPaperLizard in realtà @ risposta del gioco di parole RISPONDE alla tua domanda ... non l'ha applicata al tuo caso d'uso. Puoi seguire la sua risposta ma selezionare l' <body>elemento e ti darà lo screenshot desiderato.
— Digital Chris,
2
Se modifichi l'altezza dell'elemento DOM in modo che non vi siano barre di scorrimento interne, utilizza FireShot per acquisire l'intera pagina, dovrebbe funzionare.
Sono stato in grado di ottenere uno screenshot come questo, ma non di più. Produce ancora il suono dell'otturatore della fotocamera, non inserisce nulla negli Appunti. Lo stesso vale per il comando nella barra degli strumenti dello sviluppatore, nessun file viene creato.
— MrFox,
@MrFox Un file png viene creato nella cartella Download.
— AxiomaticNexus,
24

Puoi usare il comando screenshot dalla barra degli strumenti per sviluppatori:

  1. Premi Shift+ F2per aprire la barra degli strumenti o selezionarla dal menu Strumenti per gli sviluppatori Web.

  2. Nella barra degli strumenti, digitare il comando screenshot --fullpage fullpage.png.

Per catturare un singolo elemento puoi usare il suo selettore css con il flag --selector es 

screenshot --selector #hot-network-questions

ti porterà l'immagine qui sotto

inserisci qui la descrizione dell'immagine

— Topher
fonte
4
@RockPaperLizard Ho trovato un altro post con la stessa risposta e OP è stato modificato da te.
— gioco di
@pun Grazie. Ma devo fare uno screenshot dell'intera pagina con l'elemento espanso, non solo l'elemento stesso.
— RockPaperLizard,
Sono stato in grado di ottenere uno screenshot come questo, ma non di più. Produce ancora il suono dell'otturatore della fotocamera, ma non il file. Lo stesso vale per fare clic con il tasto destro del mouse sull'elemento in modalità sviluppatore e copiarlo in quel modo. Nessuna immagine viene inviata negli Appunti.
— MrFox,
8

Utilizza la modalità di progettazione reattiva di Firefox , imposta la larghezza su qualcosa di normale e l'altezza in modo che sia sufficiente per racchiudere l'intera pagina, fai clic sul pulsante dello screenshot (l'icona della fotocamera).

— Ouroborus
fonte
4

Esiste un software chiamato Snagit che può risolvere il tuo problema. Questo software può catturare la schermata in diversi tipi, come una finestra a scorrimento e può anche registrare video.

È un'applicazione a pagamento, ma ha anche una versione di prova disponibile.

— Gurumurthy.G
fonte
se lo trovi come risposta, contrassegnalo e pubblicalo nei commenti Cosa significa?
— AL
3
— MonkeyZeus,
Ho usato SnagIt per anni. È un software molto utile.
— Roy Tinker,
2

Uso Screenpresso . Ti permette di fare uno screenshot a scorrimento. Fondamentalmente fai uno screenshot, scorri verso il basso e prendine un altro e così via, quindi Screenpresso li ricama. Screenpresso è anche gratuito.

Cordiali saluti, i tasti di scelta rapida per lo scorrimento dello screenshot sono WindowsKey + Shift + PrintScreen. È quindi necessario fare clic sulla finestra che si desidera scorrere. Quando si arriva alla parte successiva per lo screenshot, fare clic con il tasto destro, scorrere verso il basso, fare clic con il tasto destro e così via. Quando hai finito, fai clic con il pulsante sinistro del mouse e verranno cuciti insieme. Assicurati di sovrapporre alcune schermate in modo che il processo di cucitura funzioni meglio.

— garethb
fonte
1

C'è un'estensione chiamata Nimbus Screen Capture che si adatta perfettamente a questo compito.

Hai la possibilità di catturare:

  • la parte visibile della pagina (utile per non includere gli elementi del browser rispetto a alt+ Print Scrn)
  • un frammento della pagina (per cui puoi passare il mouse sopra le regioni sullo schermo per trovare il frammento desiderato: queste regioni corrispondono ai loro elementi HTML sottostanti)
  • area selezionata (fai clic manualmente e trascini dove vuoi lo screenshot, supporta lo scorrimento durante il trascinamento)
  • l'intera pagina

nimbo

— Keith Hall
fonte
Grazie per la tua risposta, lo apprezzo molto. Sfortunatamente, non sembra che Nimbus Screen Capture possa catturare l'intero contenuto di un elemento scorrevole all'interno di una pagina. Se sbaglio, potresti fornire maggiori dettagli su come realizzare questo con quello strumento?
— RockPaperLizard,
@RockPaperLizard hai ragione, non sembra supportarlo: avevo pensato che la modalità frammento avrebbe coperto gli elementi a scorrimento, o che la modalità area selezionata avrebbe funzionato ma, mentre la finestra può essere fatta scorrere in questa modalità, sembra che gli elementi scorrevoli non possono.
— Keith Hall,
Grazie per aver confermato che non lo vedevo. Forse aggiungeranno quella funzionalità a una versione futura.
— RockPaperLizard,
0

Opzioni per adattare tutto su una pagina:

  • Utilizzare <Ctrl>-per adattare tutto su una pagina
  • Ruota lo schermo in modalità verticale
  • Utilizzare una seconda schermata in modalità verticale e posizionarla sotto la prima
  • Combina tutto quanto sopra

Un'altra opzione è scattare una schermata della parte superiore di ciò che si desidera acquisire. Scorri verso il basso, scatta la schermata successiva. Ripeti fino a quando non hai catturato tutto.
Opzionalmente: combina le schermate in un'immagine grande usando un editor di immagini (ad es. Gimp).

— NZD
fonte
1
Fino a quando non sono arrivato all'articolo 4, ho pensato che stavi solo suggerendo di combinare tutti gli articoli! Stavo immaginando di avere 20 schermi e di impilarli uno sopra l'altro ... LOL. Poi sono arrivato al n. 4 e ho scoperto che intendevi usare gli articoli singolarmente o combinati.
— RockPaperLizard,
Ma se si ingrandisce la pagina, non è possibile ridimensionarla senza distorsioni.
— NiCk Newman,
0

Per fare screenshot puoi aggiungere un'estensione come una semplice schermata. Quindi sarà molto più facile per te fare screenshot.

— user606374
fonte
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.