Node.js framework
  1. Node.js framework
  3. Come si fa a catturare uno screenshot di un’app angularjs?
Intereting Posts
Esprimere risorse con il middleware di autenticazione? Come formattare i dati in Model prima di salvare in Mongoose (ExpressJS) gulp non sta chiamando il callback – si blocca solo alla fine del compito Finestre di dialogo del prompt di Botframework fino al termine dell’utente Interruzione del ciclo async.each nidificato di javascript ma continua il ciclo principale Node.js / javascript encrypt AES-128 come mcrypt_ecb in PHP per contro per ogni problema Crittografia AES da PHP a NodeJS? Ottieni il parametro URL in Express API da Angular UI-Router Funzionalità ES6 complient Come scrivere una libreria privata riutilizzabile per Angular 2+ Come posso combinare più raccolte in una raccolta utilizzando con $ lookup mongodb o nodejs mongodb? node.js stdout clearline () e cursorTo () funzioni Crea un menu simile a una finestra su OS X Trova Mangusta () che non restituisce risultati

Come si fa a catturare uno screenshot di un’app angularjs?

Ho provato:

  • node-webshot
  • phantomjs

Potrei farlo localmente ma non potrei fare screenshot di altri siti web basati su angularjs.

generosità

Essere in grado di prendere uno screenshot di qualsiasi app di Angularjs che include jquery e angular sulla pagina. Ogni singolo sito qui: http://builtwith.angularjs.org/ dovrebbe apparire come se lo avessi caricato nel mio browser.

Deve essere in grado di ottenere lo screenshot tramite il terminale in modo che possa essere eseguito in un processo in background come un lavoratore o qualcosa del genere.

Un server casuale (o qualunque cosa dovrebbe essere in grado di andare su un sito Web fuori sito e prendere uno screenshot di esso.)

Basta prendere un url che ospiterà inevitabilmente un’app angularjs e produrrà ciò che ti aspetteresti di vedere nel tuo browser.

Non è necessario essere phantomjs o node-webshot.

Aggiornamento 1

A partire dalla scorsa notte è così che lo sto facendo.

  • node-webkit (nodejs all’interno di chromium) compilato con linux-32
  • lasciare aperto su un laptop casuale
  • quando rileva che uno screenshot deve essere preso (tramite firebase temporaneamente) apre un iframe con quell’URL
  • aspetta 10 secondi (tempo ragionevole per caricare un sito / app)
  • usa node-webkit api per eseguire lo screenshot stesso

Ho del lavoro da fare su questa soluzione.

inserisci la descrizione dell'immagine qui

Aggiornamento 2

Questa sembra essere una potenziale soluzione, ma ho scoperto che la maggior parte di queste soluzioni richiede l’apertura di un browser e l’acquisizione dello screenshot rispetto a un browser headless come phantomjs.

  • http://browsershots.org/documentation#HowToCreateANewScreenshotFactory
  • Browserstack.com

Aggiornamento 3

Sto continuando lo sviluppo di una soluzione pronta per la produzione per questo su github. https://github.com/clouddueling/angular-snapshot

Se prendi questo codice e lo compili con node-webkit.app sarai in grado di eseguire un server screenshot.

Utilizza il browser per testare la tua applicazione in tutti i browser senza doverli installare, inclusi browser per dispositivi mobili, telefoni diversi, tablet, ecc.

C’è il supporto per test automatici e schermate Selenium. Il test locale è supportato, non è necessario alcun URL pubblico.

L’ API screenshots è disponibile per la configurazione degli screenshot necessari, Screenshooter è uno strumento per generare screenshot di BrowserStack dalla riga di comando.

C’è un periodo di prova per questo in quanto è un prodotto commerciale, ma è molto ben fatto e vale ogni centesimo. Puoi iscriverti solo per un mese. Ho usato personalmente e lo consiglio vivamente.

Hai provato wkhtmltopdf ? Viene fornito con uno strumento chiamato wkhtmltoimage . Utilizza QtWebKit (una porta Qt del motore di rendering WebKit) per eseguire il rendering di una pagina Web e converte il risultato in PDF o in formato immagine a scelta, il tutto eseguito sul lato server.

Perché usa WebKit, rende tutto (immagini, css e anche javascript) proprio come fa un browser moderno. È ansible perfezionare i parametri come ad esempio modificare il periodo di tolleranza dell’esecuzione di JavaScript.

Nel mio caso d’uso, i risultati sono stati molto soddisfacenti e sono quasi identici a quelli che renderanno i browser.

Ecco un elenco di opzioni di comando: 

Name: wkhtmltoimage 0.11.0 rc2 Synopsis: wkhtmltoimage [OPTIONS]...   Description: Converts an HTML page into an image, General Options: --allow  Allow the file or files from the specified folder to be loaded (repeatable) --checkbox-checked-svg  Use this SVG file when rendering checked checkboxes --checkbox-svg  Use this SVG file when rendering unchecked checkboxes --cookie   Set an additional cookie (repeatable) --cookie-jar  Read and write cookies from and to the supplied cookie jar file --crop-h  Set height for croping --crop-w  Set width for croping --crop-x  Set x coordinate for croping --crop-y  Set y coordinate for croping --custom-header   Set an additional HTTP header (repeatable) --custom-header-propagation Add HTTP headers specified by --custom-header for each resource request. --no-custom-header-propagation Do not add HTTP headers specified by --custom-header for each resource request. --debug-javascript Show javascript debugging output --no-debug-javascript Do not show javascript debugging output (default) --encoding  Set the default text encoding, for input -H, --extended-help Display more extensive help, detailing less common command switches -f, --format  Output file format --height  Set screen height (default is calculated from page content) (default 0) -h, --help Display help --htmldoc Output program html help --images Do load or print images (default) --no-images Do not load or print images -n, --disable-javascript Do not allow web pages to run javascript --enable-javascript Do allow web pages to run javascript (default) --javascript-delay  Wait some milliseconds for javascript finish (default 200) --load-error-handling  Specify how to handle pages that fail to load: abort, ignore or skip (default abort) --disable-local-file-access Do not allowed conversion of a local file to read in other local files, unless explecitily allowed with --allow --enable-local-file-access Allowed conversion of a local file to read in other local files. (default) --manpage Output program man page --minimum-font-size  Minimum font size --password  HTTP Authentication password --disable-plugins Disable installed plugins (default) --enable-plugins Enable installed plugins (plugins will likely not work) --post   Add an additional post field (repeatable) --post-file   Post an additional file (repeatable) -p, --proxy  Use a proxy --quality  Output image quality (between 0 and 100) (default 94) --radiobutton-checked-svg  Use this SVG file when rendering checked radiobuttons --radiobutton-svg  Use this SVG file when rendering unchecked radiobuttons --readme Output program readme --run-script  Run this additional javascript after the page is done loading (repeatable) --disable-smart-width Use the specified width even if it is not large enough for the content --enable-smart-width Extend --width to fit unbreakable content (default) --stop-slow-scripts Stop slow running javascripts (default) --no-stop-slow-scripts Do not Stop slow running javascripts --transparent Make the background transparent in pngs --user-style-sheet  Specify a user style sheet, to load with every page --username  HTTP Authentication username -V, --version Output version information an exit --width  Set screen width, note that this is used only as a guide line. Use --disable-smart-width to make it strict. (default 1024) --window-status  Wait until window.status is equal to this string before rendering page --zoom  Use this zoom factor (default 1) Specifying A Proxy: By default proxy information will be read from the environment variables: proxy, all_proxy and http_proxy, proxy options can also by specified with the -p switch  := "http://" | "socks5://"  :=  (":" )? "@"  := "None" | ? ?  (":" )? Here are some examples (In case you are unfamiliar with the BNF): http://user:[email protected]:8080 socks5://myproxyserver None Contact: If you experience bugs or want to request new features please visit , if you have any problems or comments please feel free to contact me:

Anche se personalmente non l’ho provato personalmente, ho visto il servizio distribuito in produzione che utilizza schermate usando Webdriver di Selenium.

  1. Costruisci il selettore del selenium https://code.google.com/p/selenium/
  2. Utilizzare l’ API RESTful per comunicare con il server. Esistono chiamate specifiche in cui è ansible inviare una richiesta per recuperare un sito Web e acquisire uno screenshot dell’istanza corrente

tutto è fatto in background, quindi penso che soddisfi le tue esigenze.

Probabilmente questo aiuterà https://bitbucket.org/vodolaz095/site-shooter Questa è l’applicazione nodejs + phantomjs per fare screenshot del sito

Hai bisogno di un servizio di tier gratuito Heroku per eseguire questo.

A proposito, puoi provare questa applicazione – https://pageshooter.herokuapp.com penso che possa fare screenshot di siti angularjs

Node-Webshot utilizza PhantomJS che a sua volta utilizza QtWebkit che non funziona con AngularJS.

Maggiori informazioni: https://github.com/angular/angular.js/issues/2985

Suggerimento. Assicurati che il PhantomJS che hai incluso in Node-Webshot sia assolutamente l’ultima versione. In caso contrario, sostituisci il PhantomJS con l’ultima versione e attacca che sia stato risolto.

Se hai accesso alle opzioni della riga di comando di PhantomJS, puoi provarne alcuni qui: https://github.com/ariya/phantomjs/wiki/API-Reference

Quelli che si occupano in particolare della campana sono:

–ignore-ssl-errors = true

–local-to-remote-url-access = true

–web-security = false