Come fare uno screenshot del sito web in JavaScript lato client / come Google l’ha fatto? (non è necessario accedere all’HDD)

Sto lavorando su un’applicazione web che deve eseguire il rendering di una pagina e creare uno screenshot sul lato client (browser).

Non ho bisogno che lo screenshot venga salvato sul disco fisso locale, ma lo tengo nella RAM e lo spedisco al server delle applicazioni in un secondo momento.

Ho cercato:

  1. BrowserShots allo stesso modo …
  2. Browser meccanizzati …
  3. wkhtmltoimage …
  4. Python WebKit2PNG …

Ma nessuno di questi mi dà tutto ciò di cui ho bisogno, che è:

  1. Elaborazione sul lato del browser (generare screenshot della pagina). Non è necessario essere salvati su HDD! Appena…
  2. … invia l’immagine al server per ulteriori elaborazioni.
  3. Catturare l’intera pagina (non solo la parte visibile)

Alla fine mi sono imbattuto in Google Feedback Tool (fai clic su “feedback” sul footer di YouTube per vedere questo). Contiene JavaScript per la codifica JPG e altri due script enormi che non riesco a determinare esattamente cosa fanno …

Ma è elaborato dal lato client – altrimenti non avrebbe senso inserire questo enorme codificatore JPEG nel codice!

Qualcuno ha idea di come l’hanno fatto / come posso farcela?

Ecco un esempio del feedback (riporta un bug su alcuni schermi)

Esempio di bug di feedback / report

“L’ uso di HTML5 / Canvas / JavaScript per acquisire schermate ” risponde al tuo problema.

Puoi usare JavaScript / Canvas per fare il lavoro ma è ancora sperimentale.

Avevo bisogno di scattare un’istantanea sulla pagina (per una webapp che ho scritto) che è protetta da JWT e fa un uso molto pesante di Angular.

Non ho avuto fortuna con nessuno dei metodi sopra descritti.

Ho finito col prendere l’outerHTML del div di cui avevo bisogno, ripulendolo un po ‘(*) e poi inviandolo al server dove eseguivo wkhtmltopdf contro di esso.

Questo sta funzionando molto bene per me.

(*) vari dispositivi di input nelle mie pagine non sono stati renderizzati come verificati o hanno i loro valori di testo se visualizzati nel pdf … Quindi eseguo un po ‘di jQuery sull’html prima di inviarlo per il rendering. ex: per gli elementi di input del testo – copio i loro valori .val () in attributi ‘value’, che possono essere visualizzati da wkhtmlpdf

SnapEngage fornisce questo servizio utilizzando un’applet Java . Puoi usare il loro prodotto Snapabug o ricreare le loro funzionalità usando le informazioni qui . Puoi anche leggere su di esso qui .