Phantomjs - cattura lo screenshot di una pagina Web

Ho un URL (ad esempio http://www.example.com/OtterBox-77-24444-Commuter-Series-Optimus/dp/B00A21KPEI/ref=pd_sim_cps_4) e voglio prendere uno screenshot di esso e visualizzarlo in anteprima sulla mia pagina web. Significato, l'utente fa clic sul pulsante di anteprima e PhantomJS ha bisogno di visualizzare l'anteprima della pagina Web come PNG/JPEGPhantomjs - cattura lo screenshot di una pagina Web

Sto bene con l'utilizzo di qualsiasi altra open source troppo.

fonte

2013-06-19 Abhiram Sampath

Suppongo che tu abbia installato Phantomjs e abbia creato un alias nel tuo .bashrc o abbia aggiornato il tuo percorso di sistema per chiamare i binari di Phantomjs. In caso contrario, è necessario esaminare alcune esercitazioni per principianti: http://net.tutsplus.com/tutorials/javascript-ajax/testing-javascript-with-phantomjs/

Una volta impostato, sarà necessario scrivere un semplice file javascript che si chiamerà nel terminale (o shell, se si utilizza Windows) . Fornirò un semplice script di esempio qui sotto.

var WebPage = require('webpage'); 
page = WebPage.create(); 
page.open('http://google.com'); 
page.onLoadFinished = function() { 
    page.render('googleScreenShot' + '.png'); 
    phantom.exit();}

Quindi, salvare il file js. Apri il tuo terminale o shell ed esegui il seguente

phantomjs yourFile.js

Questo è tutto. Controlla la directory in cui hai chiamato il file js e dovresti avere un file png con una schermata della tua pagina web.

Questo è molto semplice e ci sono molti avvertimenti da fare con i phantomjs, ma questo è fondamentale come posso farlo. Se hai bisogno di altre ricette per phantomjs, prova a guardare questi script di esempio: https://github.com/ariya/phantomjs/wiki/Examples

fonte

2013-06-19 16:59:01 cliffbarnes

Se qualcuno vede questo ... Come utilizzare questo metodo per salvare screenshot di una pagina HTML che Ho creato localmente? – Chris

@Chris se stai utilizzando un server locale, dovresti essere in grado di navigare a 'http: // localhost' o ovunque tu stia servendo da. Funzionerà esattamente allo stesso modo, dato che generalmente i browser non si preoccupano di dove si trova un determinato server. Se non stai eseguendo un server locale, prova a navigare nel percorso assoluto del file utilizzando il protocollo del file, ad es. 'file: /// path/to/file.html' – acobster

@acobster Mi sono allontanato da quel progetto nel mio internato per un po '. Ma grazie per il tuo impegno, soprattutto in questa stagione del nuovo anno! – Chris

La risposta di cui sopra va bene per l'utilizzo di base, ma PhantomJS non sa se tutte le richieste AJAX sono state caricate o meno. Ho fatto url-to-image per aiutare con questo problema.

npm install url-to-image

screenshot.js scrittura

var screenshot = require('url-to-image'); 
screenshot('http://google.com', 'google.png').done(function() { 
    console.log('http://google.com screenshot saved to google.png'); 
});

Esegui script node screenshot.js

fonte

2014-03-06 22:57:00 Kimmo

Ciao @Kimmo posso impostare altezza, larghezza o useragent in questo? –

@MohitArora sì, puoi impostare larghezza e altezza. La documentazione era piuttosto brutta e non menzionava affatto le opzioni. Ho aggiunto un esempio dettagliato di utilizzo a https://github.com/kimmobrunfeldt/url-to-image#api – Kimmo

Questo è fantastico. 'npm i -g url-to-image; urltoimage http: // localhost: 3000 ~/Desktop/foo.jpg' Finalmente immagini a piena pagina. Per l'amore di Dio, per favore impacchettalo come estensione per Chrome che funziona davvero! – corysimmons

Phantomjs - cattura lo screenshot di una pagina Web

risposta

Problemi correlati