Schermate del sito Web


407

Esiste un modo per acquisire uno screenshot di un sito Web in PHP e salvarlo in un file?


2
Se ti piace un calo della soluzione, dai un'occhiata a Usersnap : è un buon servizio che offre schermate accurate del sito web. Devi solo aggiungere un piccolo frammento Javascript alla tua pagina per farlo funzionare.
Gregor,

1
Gli utenti non possono far fronte alle pagine Web che utilizzano Ajax per generare il contenuto come in questa pagina . Come potrei farlo? diciamo: fai lo screenshot 10 secondi dopo il caricamento iniziale della pagina finito
rubo77

1
@ rubo77: Usersnap supporta tali DOM dinamici, l'ho provato con la tua pagina: lo screenshot riproduce l'esatta posizione tra cui tutte le posizioni.
Gregor,

Risposte:


280

ULTIMA MODIFICA : dopo 7 anni ricevo ancora voti per questa risposta, ma suppongo che questo sia ora molto più accurato.


Certo che puoi, ma dovrai renderizzare la pagina con qualcosa. Se vuoi davvero usare solo php, ti suggerisco HTMLTOPS , che rende la pagina e l'output in un file ps (ghostscript), quindi convertilo in un file .jpg, .png, .pdf .. può essere leggermente più lento con pagine complesse (e non supportano tutti i CSS).

Altrimenti, puoi usare wkhtmltopdf per generare una pagina html in pdf, jpg, qualunque cosa .. Accetta CSS2.0, usa il webkit (il wrapper di Safari) per renderizzare la pagina .. quindi dovrebbe andare bene. Devi installarlo anche sul tuo server ..

AGGIORNARE Ora, con le nuove funzionalità HTML5 e JS, è anche possibile eseguire il rendering della pagina in un oggetto canvas utilizzando JavaScript. Ecco una bella libreria per farlo: Html2Canvas e qui è un'implementazione dello stesso autore per ottenere un feedback come G +. Dopo aver eseguito il rendering del dom nell'area di disegno, è possibile quindi inviarlo al server tramite Ajax e salvarlo come jpg.

EDIT : puoi usare lo strumento imagemagick per trasformare pdf in png. La mia versione di wkhtmltopdf non supporta le immagini. Es convert html.pdf -append html.png.

MODIFICARE : Questo piccolo script di shell fornisce un esempio di utilizzo semplice / ma funzionante su Linux con php5-cli e gli strumenti sopra menzionati.

EDIT : ho notato ora che il team di wkhtmltopdf sta lavorando a un altro progetto: wkhtmltoimage, che ti dà direttamente il jpg


11
+1 per wkhtmltopdf. Ho giocato con alcune altre librerie, ma nessuna di esse si è avvicinata nemmeno a supportare qualcosa di più di HTML e CSS molto basilari. wkhtmltopdf può fare tutto ciò che fa Safari, quindi sei abbastanza sicuro lì.
Wim,

7
wkhtmltoimage funziona alla grande! Grazie per il consiglio. Emette anche png.
yuttadhammo,

2
Ora menzioni wkhtmltopdf KnpLabs ha un wrapper per esso github.com/KnpLabs/snappy
rmontagud

1
@rmontagud l'uso di wkhtmltopdf è abbastanza semplice, tra l'altro un wrapper OOP è sempre buono!
Strae

1
Queste erano tutte ottime soluzioni qualche anno fa, ma la tecnologia del browser su cui si basano non è stata aggiornata con le ultime specifiche HTML5 / CSS. Se stai eseguendo il rendering di un sito che utilizza font web, svg, canvas, flexbox ecc. Allora buona fortuna per ottenere uno screenshot accurato .. Se vuoi screenshot accurati controlla la mia risposta che utilizza urlbox
cjroebuck

87

Da quando PHP 5.2.2 è possibile, catturare un sito Web esclusivamente con PHP !

imagegrabscreen - Cattura l'intero schermo

<?php
$img = imagegrabscreen();
imagepng($img, 'screenshot.png');
?>

imagegrabwindow : prende una finestra o la sua area client usando un handle di Windows (proprietà HWND nell'istanza COM)

<?php
$Browser = new COM('InternetExplorer.Application');
$Browserhandle = $Browser->HWND;
$Browser->Visible = true;
$Browser->Fullscreen = true;
$Browser->Navigate('http://www.stackoverflow.com');

while($Browser->Busy){
  com_message_pump(4000);
}

$img = imagegrabwindow($Browserhandle, 0);
$Browser->Quit();
imagepng($img, 'screenshot.png');
?>

Modifica: Nota, queste funzioni sono disponibili SOLO su sistemi Windows!


26
Non proprio solo PHP, vero?
Toby Allen,

Questo utilizza il browser Internet Explorer per eseguire il rendering di elementi.
keanu_reeves,

55

Se non desideri utilizzare strumenti di terze parti, mi sono imbattuto in una semplice soluzione che utilizza Google Page Insight api.

Devo solo chiamare API con i parametri screenshot=true.

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?
url=https://stackoverflow.com/&key={your_api_key}&screenshot=true

Per passare la vista del sito mobile &strategy=mobilenei parametri,

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?
url=http://stackoverflow.com/&key={your_api_key}&screenshot=true&strategy=mobile

DEMO .


3
Questo è piuttosto interessante e sembra funzionare anche senza fornire una chiave API. L'immagine restituita è rotta, tuttavia è necessario sostituire tutto '_' con '/' e tutto '-' con '+' e quindi è possibile semplicemente aggiungerlo come uri dati
Robert è andato il

9
Questo è bellissimo. L'ho codificato su gist.github.com/jaseclamp/d4ac6205db352e822ff6
JaseC,

21
Pertanto, per riferimento, l'API Page Insight di Google è uno strumento di terze parti.
Jimbo,

1
lo screenshot ha una risoluzione limitata a 320x240, è come un pollice
Gabriele F.

1
Davvero fantastico! Ha qualche limite per usarlo?
moreirapontocom,

19

È possibile utilizzare un semplice browser senza testa come PhantomJS per afferrare la pagina.

Inoltre puoi usare PhantomJS con PHP.

Dai un'occhiata a questo piccolo script php che lo fa. Dai un'occhiata qui https://github.com/microweber/screen

Ed ecco l'API- http://screen.microweber.com/shot.php?url=/programming/757675/website-screenshots-using-php


PhantomJS è generalmente un'ottima soluzione per questo, anche se quando l'ho usato esattamente per questo scopo, non tutti gli elementi dell'interfaccia HTML sono stati renderizzati correttamente.
ultrageek,

2
screen.microweber.com/shot.php?url=https://stackoverflow.com/… è ora un 404 e si chiede se la risposta qui debba essere eliminata. In entrambi i casi, dovrebbe essere aggiornato.
Funk Forty Niner

18

Questo dovrebbe essere buono per te:

https://wkhtmltopdf.org/

Assicurati di scaricare la distribuzione wkhtmltoimage!


1
A proposito, l'ho installato su Ubuntu 10.04 semplicemente usando apt-get. Tuttavia, quando l'ho eseguito, è stato molto, molto lento e il layout PDF era inclinato e non era un'opzione praticabile. Tuttavia, mostra la promessa di utilizzare KHTML in questo modo - eventualmente - per la generazione di immagini.
Volomike,

@Volomike - Non puoi ottenere risultati migliori di questo poiché, come sai, viene utilizzato un browser conforme agli standard. Per quanto riguarda la velocità, l'azienda con cui lavoro lo ha ripetutamente utilizzato in vari progetti che richiedono progetti CSS a grana fine (ma di piccole dimensioni).
Christian,

Posso garantire l'efficacia di questo prodotto. Sviluppo applicazioni per la creazione di grafici per clienti governativi che vengono fornite tramite html / css ma devono essere archiviate come pdf. NESSUN ALTRO prodotto web-to-pdf si avvicinava quasi alla riproduzione perfetta dei nostri grafici come wkhtmltopdf.
Daniel Szabo,

@Volomike: la versione nel repository di solito non è la più recente; l'installazione della versione stabile più recente dal sorgente ha risolto molte stranezze della versione precedente.
Piskvor lasciò l'edificio il

10

Sì. Avrai bisogno di alcune cose:

Vedi khtmld (aemon) su * nx. Vedi Url2Jpg per Windows ma poiché si tratta dell'app dotNet dovresti anche controllare Url2Bmp

Entrambi sono strumenti della console che puoi utilizzare dalla tua app Web per ottenere lo screenshot.

Ci sono anche servizi web che lo offrono. Controllare questo fuori per esempio.

Modificare:

Questo link è utile per.


10

È in Python, ma esaminando la documentazione e il codice puoi vedere esattamente come è fatto. Se riesci a eseguire Python, allora è una soluzione pronta per te:

http://browsershots.org/

Si noti che tutto può essere eseguito su una macchina per una piattaforma o una macchina con macchine virtuali che eseguono le altre piattaforme.

Gratuito, open source, scorrere fino alla fine della pagina per collegamenti a documentazione, codice sorgente e altre informazioni.


24
Regola 37: Non c'è eccessivo. C'è solo "fuoco aperto" e "tempo per ricaricare".
Adam Davis,

Il codice sorgente attiva comunque un browser desktop per il rendering. Non è esattamente sicuro per i thread e potrebbe essere soggetto a blocco.
Volomike,

@Volomike - Vero, ma se hai bisogno di vedere come appare la pagina quando viene eseguita da un browser, non c'è quasi scelta migliore. I motori di rendering HTML vanno così lontano solo con le pesanti pagine javascript di oggi. L'impostazione di autorizzazioni e timeout di esecuzione appropriati dovrebbe limitare le difficoltà e i rischi legati all'esecuzione di un programma esterno.
Adam Davis,


5

Bene, PhantomJS è un browser che può essere facilmente inserito su un server e integrato in php. Puoi trovare il codice in WDudes. Hanno incluso molte più funzioni come specificare la dimensione dell'immagine, la cache, il download come file o la visualizzazione in img src ecc.

<img src=”screenshot.php?url=google.com” />

Parametri URL

  • Larghezza e altezza: screenshot.php? Url = google.com & w = 1000 & h = 800

  • Con il ritaglio: screenshot.php? Url = google.com & w = 1000 & h = 800 & clipw = 800 & cliph = 600

  • Disabilita la cache e carica un nuovo screesnhot:
    screenshot.php? Url = google.com & cache = 0

  • Per scaricare l'immagine: screenshot.php? Url = google.com & download = true

Puoi vedere il tutorial qui: Cattura Screenshot di un sito Web usando PHP senza API


Oh. Mi dispiace per quello. Sembra che il blog non lo sia più. Prova github.com/graphcool/chromeless @NarendraVerma
Gijo Varghese

4

cutycapt salva le pagine Web nella maggior parte dei formati di immagine (jpg, png ..) scaricandolo dalla sinaptica, funziona molto meglio di wkhtmltopdf



3

Ho installato finalmente usando microweber / screen come proposto da @boksiora.
Inizialmente quando ho provato il link menzionato qui ho ottenuto:

Please download this script from here https://github.com/microweber/screen

Sono su Linux. Quindi, se vuoi eseguirlo, puoi adattare il mio passo al tuo ambiente.
Ecco il passaggio che ho fatto sulla mia shell nella DOCUMENT_ROOTcartella:

$ sudo wget https://github.com/microweber/screen/archive/master.zip
$ sudo unzip master.zip
$ sudo mv screen-master screen
$ sudo chmod +x screen/bin/phantomjs
$ sudo yum install fontconfig
$ sudo yum install freetype*
$ cd screen
$ sudo curl -sS https://getcomposer.org/installer | php
$ sudo php composer.phar update
$ cd ..
$ sudo chown -R apache screen
$ sudo chgrp -R www screen
$ sudo service httpd restart

Punta il browser verso screen/demo/shot.php?url=google.com. Quando vedi lo screenshot , hai finito. La discussione per ulteriori impostazioni anticipate è disponibile qui e qui .


3

Esistono molti progetti open source in grado di generare schermate. Ad esempio PhantomJS, webkit2png ecc

Il grosso problema di questi progetti è che si basano sulla tecnologia del browser precedente e hanno problemi nel rendering di molti siti, in particolare i siti che utilizzano font web, flexbox, svg e varie altre aggiunte alle specifiche HTML5 e CSS negli ultimi due mesi / anni.

Ho provato alcuni dei servizi di terze parti e la maggior parte sono basati su PhantomJS, il che significa che producono anche schermate di scarsa qualità. Il miglior servizio di terze parti per la generazione di schermate di siti Web è urlbox.io . È un servizio a pagamento, sebbene sia disponibile una prova gratuita di 7 giorni per testarlo senza impegnarsi in alcun piano a pagamento.

Ecco un link alla documentazione , e di seguito sono riportati semplici passaggi per farlo funzionare in PHP con compositore.

// 1 . Get the urlbox/screenshots composer package (on command line):
composer require urlbox/screenshots

// 2. Set up the composer package with Urlbox API credentials:
$urlbox = UrlboxRenderer::fromCredentials('API_KEY', 'API_SECRET');

// 3. Set your options (all options such as full page/full height screenshots, retina resolution, viewport dimensions, thumbnail width etc can be set here. See the docs for more.)
$options['url'] = 'example.com';

// 4. Generate the Urlbox url
$urlboxUrl = $urlbox->generateUrl($options);
// $urlboxUrl is now 'https://api.urlbox.io/v1/API_KEY/TOKEN/png?url=example.com'

// 5. Now stick it in an img tag, when the image is loaded in browser, the API call to urlbox will be triggered and a nice PNG screenshot will be generated!
<img src="$urlboxUrl" />

Ad esempio, ecco uno screenshot a tutta altezza di questa stessa pagina:

https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/8f1666d1f4195b1cb84ffa5f992ee18992a2b35e/png?url=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F757675%2Fwebsite-screenshots-using-php% 2F43652083% 2.343.652,083 mila & full_page = true

screenshot della pagina intera della domanda di stackoverflow.com fornito da urlbox.io


3

Ci sono molte opzioni e tutti hanno i loro pro e contro. Ecco un elenco di opzioni ordinate per difficoltà di implementazione.

Opzione 1: utilizzare un'API (la più semplice)

Professionisti

  • Esegui Javascript
  • Rendering quasi perfetto
  • Veloce quando le opzioni di memorizzazione nella cache sono utilizzate correttamente
  • La scala è gestita dalle API
  • Tempi precisi, finestra, ...
  • Il più delle volte offrono un piano gratuito

Contro

  • Non gratuito se prevedi di usarli molto

Opzione 2: utilizzare una delle molte librerie disponibili

Professionisti

  • La conversione è abbastanza veloce per la maggior parte del tempo

Contro

  • Cattivo rendering
  • Non esegue JavaScript
  • Nessun supporto per le funzionalità Web recenti (FlexBox, selettori avanzati, caratteri Web, ridimensionamento delle caselle, query multimediali, tag HTML5 ...)
  • A volte non è così facile da installare
  • Complicato per ridimensionare

Opzione 3: utilizzare PhantomJs e forse una libreria wrapper

Professionisti

  • Esegui Javascript
  • Abbastanza veloce

Contro

  • Cattivo rendering
  • PhantomJs è stato deprecato e non viene più mantenuto.
  • Nessun supporto per le funzionalità Web recenti (FlexBox, selettori avanzati, caratteri Web, ridimensionamento delle caselle, query multimediali, tag HTML5 ...)
  • Complicato per ridimensionare
  • Non è così facile farlo funzionare se ci sono immagini da caricare ...

Opzione 4: utilizzare Chrome Headless e forse una libreria wrapper

Professionisti

  • Esegui Javascript
  • Rendering quasi perfetto

Contro

  • Non è così facile avere esattamente il risultato desiderato per quanto riguarda:
    • tempismo di caricamento della pagina
    • integrazione proxy
    • scorrimento automatico
    • ...
  • Complicato per ridimensionare
  • Abbastanza lento e persino più lento se l'html contiene collegamenti esterni

Disclaimer: sono il fondatore di ApiFlash. Ho fatto del mio meglio per fornire una risposta onesta e utile.


2

Sono su Windows, quindi sono stato in grado di utilizzare la funzione imagegrabwindow dopo aver letto il suggerimento qui da Stephan. Ho aggiunto il ritaglio (per eliminare l'intestazione del browser, le barre di scorrimento, ecc.) E il ridimensionamento per ottenere un'immagine finale. Ecco il mio codice . Spero che aiuti qualcuno.


1

webkit2html funziona su Mac OS X e Linux, è abbastanza semplice da installare e da utilizzare. Vedi questo tutorial .

Per Windows, puoi usare CutyCapt , che ha funzionalità simili.


2
@Smith: l'ultima volta che ho controllato, CutyCapt ha tutte le dipendenze nel programma di installazione. Sì, probabilmente non sarai in grado di installarlo con un account limitato, ma questa è la vita. Nota che tutte le altre soluzioni stanno usando una sorta di wrapper attorno a un core di rendering, quindi sei nello stesso posto con loro.
Piskvor lasciò l'edificio il

1

Ho usato Bluga . L'API ti consente di scattare 100 istantanee al mese senza pagare, ma a volte utilizza più di 1 credito per una singola pagina. Ho appena finito di aggiornare un modulo drupal, Bluga WebThumbs a drupal 7 che consente di stampare una miniatura in un modello o in un filtro di input.

Il vantaggio principale dell'utilizzo di questa API è che ti consente di specificare le dimensioni del browser nel caso in cui utilizzi CSS adattivi, quindi lo sto usando per ottenere rendering per il layout mobile e tablet, nonché quello normale.

Esistono client API per le seguenti lingue:

PHP , Python , Ruby , Java , .Net C # , Perl e Bash (lo script della shell sembra richiedere perl)



1

Puoi usare la soluzione https://grabz.it .

Ha un'API PHP che è molto flessibile e può essere chiamata in diversi modi come da una cronjob o una pagina web PHP.

Per implementarlo dovrai prima ottenere una chiave dell'app, un segreto e un download l'SDK (gratuito).

E un esempio per l'implementazione. Prima di tutto l'inizializzazione:

include("GrabzItClient.class.php");

// Create the GrabzItClient class
// Replace "APPLICATION KEY", "APPLICATION SECRET" with the values from your account!
$grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");

E esempio di screenshot:

// To take a image screenshot
$grabzIt->URLToImage("http://www.google.com");  
// Or to take a PDF screenshot
$grabzIt->URLToPDF("http://www.google.com");
// Or to convert online videos into animated GIF's
$grabzIt->URLToAnimation("http://www.example.com/video.avi");
// Or to capture table(s)
$grabzIt->URLToTable("http://www.google.com");

Il prossimo è il salvataggio. È possibile utilizzare uno dei due metodi di salvataggio, Savese è disponibile l'handle di callback accessibile pubblicamente e in SaveTocaso contrario. Controlla la documentazione per i dettagli .


Se stai cercando schermate a pagina intera, questo provider richiede un abbonamento Professional ($ 170 / anno).
Chaoskreator,

1

L'altro giorno ho scritto un'app veloce e sporca per farlo usando l'API di Google. Certamente possibilità di miglioramento ...

  • Utilizza l'ultima versione 5 dell'API di Google.
  • Dimensione dell'immagine ora larga 500 px
  • Supporta la visualizzazione desktop e mobile
  • Salva in un file in una cartella specificata
  • Incorporare un sistema cache rudimentale

Trovalo qui con una demo e un codice live .

Non ho inserito il codice qui semplicemente perché continuo a perfezionarlo e, spero, quando ho tempo, lo converto in una classe corretta.


0

Ho usato page2images . È sviluppato sulla base del cutycapt che è veramente veloce e stabile. Se non si desidera dedicare troppo tempo alle prestazioni e alla configurazione, è necessario utilizzarlo. Se vai sul loro sito Web, puoi trovare maggiori dettagli e un esempio di codice PHP.


0

Dopo tanto per navigare sul web ho trovato questo.

PPTRAAS > Uno strumento gratuito per catturare screenshot passando l'URL come parametro

Forniscono più opzioni semplicemente premendo il loro URL.

  1. Ottieni uno screenshot a pagina intera

    https://pptraas.com/screenshot?url= {YOU URL HERE}

  2. Ottieni uno screenshot di pagina di dimensioni specifiche

    https://pptraas.com/screenshot?url= {YOU URL HERE} & size = 400.400

  3. Si può anche convertire la pagina in pdf

    https://pptraas.com/pdf?url= {YOU URL HERE}


Josh, quando ho caricato la risposta, funzionava bene, immagino che non possiamo dipendere da questo url, per favore trova un'altra alternativa in quanto potrebbero aver interrotto il servizio per ora
Fenil Shah,


-1

Non direttamente Software come Selenium hanno funzionalità come questa e possono essere controllati da PHP ma hanno altre dipendenze (come eseguire il proprio server basato su Java sul computer con il browser che si desidera acquisire)


Ci sono molte librerie PHP ora disponibili per questo. Non esattamente una libreria "PHP". Coinvolge alcuni browser e codici js.
Gijo Varghese,

-1

puoi usare cutycapt.

kwhtml è obsoleto e mostra la pagina come il vecchio browser.


-1

Ho scoperto che questo è lo strumento migliore e più semplice in circolazione: ScreenShotMachine . È un servizio a pagamento, ma ottieni 100 screenshot gratuiti e puoi acquistarne altri 2.000 per (circa) $ 20, quindi è un buon affare. Ha un utilizzo molto semplice, basta usare un URL, quindi ho scritto questo piccolo script per salvare un file basato su di esso:

<?php
  $url = file_get_contents("http://api.screenshotmachine.com/?key={mykey}&url=https://stackoverflow.com&size=X");

  $file = fopen("snapshots/stack.jpg", "w+");
  fwrite($file, $url);
  fclose($file);
  die("saved file!");
?>

Hanno un'ottima documentazione qui , quindi dovresti assolutamente dare un'occhiata.

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.