Captures d'écran du site

407

Existe-t-il un moyen de prendre une capture d'écran d'un site Web en PHP, puis de l'enregistrer dans un fichier?

Paolo Forgia
la source
2
Si vous aimez une solution intégrée, jetez un œil à Usersnap - c'est un bon service offrant des captures d'écran précises du site Web. Il vous suffit d'ajouter un petit extrait Javascript à votre page pour le faire fonctionner.
Gregor
1
Usersnap ne peut pas gérer les pages Web qui utilisent Ajax pour générer le contenu comme sur cette page . Comment pourrais-je y parvenir? disons: faites la capture d'écran 10 secondes après le chargement initial de la page
rubo77
1
@ rubo77: Usersnap prend en charge de tels DOM dynamiques, je l'ai essayé avec votre page - la capture d'écran reproduit la situation exacte, y compris toutes les positions.
Gregor

Réponses:

280

DERNIÈRE ÉDITION : après 7 ans, je reçois toujours des votes positifs pour cette réponse, mais je suppose que celle-ci est maintenant beaucoup plus précise.


Bien sûr que vous pouvez, mais vous devrez rendre la page avec quelque chose. Si vous voulez vraiment utiliser uniquement php, je vous suggère HTMLTOPS , qui rend la page et la dans un fichier ps (ghostscript), puis, convertissez-la en .jpg, .png, .pdf .. peut être un peu plus lent avec pages complexes (et ne prennent pas en charge tous les CSS).

Sinon, vous pouvez utiliser wkhtmltopdf pour sortir une page html en pdf, jpg, peu importe. Acceptez CSS2.0, utilisez le webkit (wrapper de safari) pour rendre la page .. donc ça devrait aller. Vous devez également l'installer sur votre serveur ..

MISE À JOUR Maintenant, avec la nouvelle fonctionnalité HTML5 et JS, il est également possible de rendre la page dans un objet de canevas en utilisant JavaScript. Voici une belle bibliothèque pour le faire: Html2Canvas et voici une implémentation du même auteur pour obtenir un feedback comme G +. Une fois que vous avez rendu le dom dans le canevas, vous pouvez ensuite l'envoyer au serveur via ajax et l'enregistrer au format jpg.

EDIT : Vous pouvez utiliser l'outil imagemagick pour transformer un pdf en png. Ma version de wkhtmltopdf ne prend pas en charge les images. Par exemple convert html.pdf -append html.png.

MODIFIER : Ce petit script shell donne un exemple d'utilisation simple / mais fonctionnel sur linux avec php5-cli et les outils mentionnés ci-dessus.

EDIT : j'ai remarqué maintenant que l'équipe wkhtmltopdf travaille sur un autre projet: wkhtmltoimage, qui vous donne directement le jpg

Strae
la source
11
+1 pour wkhtmltopdf. J'ai joué avec d'autres bibliothèques, mais aucune d'entre elles n'a même failli prendre en charge autre chose que HTML et CSS très basiques. wkhtmltopdf peut faire tout ce que fait Safari, vous y êtes donc en sécurité.
Wim
7
wkhtmltoimage fonctionne très bien! Merci pour le conseil. Produit également png.
yuttadhammo
2
Vous mentionnez maintenant wkhtmltopdf KnpLabs a un wrapper pour cela github.com/KnpLabs/snappy
rmontagud
1
@rmontagud l'utilisation de wkhtmltopdf est assez facile, d'ailleurs un wrapper OOP est toujours bon!
Strae
1
Ces solutions étaient toutes excellentes il y a quelques années, mais la technologie de navigateur sur laquelle elles sont toutes basées n'a pas été mise à jour avec les dernières spécifications HTML5 / CSS. Si vous affichez un site qui utilise des polices Web, svg, canvas, flexbox etc. alors bonne chance pour obtenir une capture d'écran précise .. Si vous voulez des captures d'écran précises, consultez ma réponse qui utilise urlbox
cjroebuck
87

Depuis PHP 5.2.2, il est possible de capturer un site Web avec PHP uniquement !

imagegrabscreen - Capture tout l'écran

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

imagegrabwindow - Récupère une fenêtre ou sa zone cliente à l'aide d'un handle Windows (propriété HWND dans l'instance 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');
?>

Edit: Remarque, ces fonctions sont disponibles UNIQUEMENT sur les systèmes Windows!

stephan
la source
26
Pas vraiment uniquement PHP, n'est-ce pas?
Toby Allen
Cela utilise le navigateur Internet Explorer pour afficher des éléments.
keanu_reeves
55

Si vous ne souhaitez pas utiliser d'outils tiers, je suis tombé sur une solution simple qui utilise Google Page Insight API .

Il suffit d'appeler son api avec des paramètres screenshot=true.

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

Pour passer la vue du site mobile &strategy=mobiledans les paramètres,

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

DEMO .

Rikesh
la source
3
C'est assez cool et semble également fonctionner sans fournir de clé API. L'image renvoyée est cassée cependant, vous devez remplacer tous les '_' par '/' et tous les '-' par '+' et ensuite vous pouvez simplement l'ajouter comme uri de données
Robert Went
9
C'est génial. J'ai codé cela à gist.github.com/jaseclamp/d4ac6205db352e822ff6
JaseC
21
Donc, pour référence, l'API Page Insight de Google est un outil tiers.
Jimbo
1
capture d'écran ont une résolution limitée à 320x240, c'est comme un pouce
Gabriele F.
1
Vraiment génial! Il a une limite pour l'utiliser?
moreirapontocom
19

Vous pouvez utiliser un simple navigateur sans tête comme PhantomJS pour saisir la page.

Vous pouvez également utiliser PhantomJS avec PHP.

Découvrez ce petit script php qui fait cela. Jetez un œil ici https://github.com/microweber/screen

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

boksiora
la source
PhantomJS est généralement une excellente solution pour cela, bien que lorsque je l'ai utilisé exactement à cette fin, tous les éléments de l'interface HTML ne soient pas rendus correctement.
ultrageek
2
screen.microweber.com/shot.php?url=https://stackoverflow.com/… est maintenant un 404 et se demande si la réponse ici doit être supprimée. Dans les deux cas, il doit être mis à jour.
Funk Forty Niner
18

Cela devrait être bon pour vous:

https://wkhtmltopdf.org/

Assurez-vous de télécharger la distribution wkhtmltoimage!

Christian
la source
1
BTW, je l'ai installé sur Ubuntu 10.04 simplement en utilisant apt-get. Cependant, lorsque je l'ai exécuté, c'était très, très lent et la mise en page PDF était de travers et n'était pas vraiment une option viable. Cependant, il semble prometteur d'utiliser KHTML de cette manière - éventuellement - pour la génération d'images.
Volomike
@Volomike - Vous ne pouvez pas obtenir de meilleurs résultats que cela, car, comme vous le savez, un navigateur conforme aux normes est utilisé. En ce qui concerne la vitesse, l'entreprise avec laquelle je travaille l'a utilisée à plusieurs reprises dans divers projets nécessitant des projets CSS à grain fin (mais de petite taille).
Christian
Je peux garantir l'efficacité de ce produit. Je développe des applications graphiques pour les clients gouvernementaux qui sont livrées via html / css mais qui doivent être archivées en pdf. AUCUN AUTRE produit web-to-pdf n'a été aussi proche de reproduire parfaitement nos graphiques que wkhtmltopdf.
Daniel Szabo
@Volomike: la version dans le référentiel n'est généralement pas la plus récente; l'installation de la dernière version stable à partir de la source a corrigé de nombreuses bizarreries de l'ancienne version pour moi.
Piskvor a quitté le bâtiment le
10

Oui. Vous aurez besoin de certaines choses:

Voir khtmld (aemon) sur * nx. Voir Url2Jpg pour Windows, mais comme il s'agit de l'application dotNet, vous devez également vérifier Url2Bmp

Les deux sont des outils de console que vous pouvez utiliser à partir de votre application Web pour obtenir la capture d'écran.

Il existe également des services Web qui le proposent. Vérifiez cela par exemple.

Éditer:

Ce lien est utile pour.

majkinetor
la source
10

C'est en Python, mais en parcourant la documentation et le code, vous pouvez voir exactement comment cela se fait. Si vous pouvez exécuter python, alors c'est une solution toute faite pour vous:

http://browsershots.org/

Notez que tout peut s'exécuter sur une machine pour une plate-forme ou sur une machine avec des machines virtuelles exécutant les autres plates-formes.

Libre, open source, faites défiler vers le bas de la page pour des liens vers la documentation, le code source et d'autres informations.

Adam Davis
la source
24
Règle 37: Il n'y a pas de surpuissance. Il n'y a que «feu ouvert» et «temps pour recharger».
Adam Davis
Le code source déclenche toujours un navigateur de bureau pour le rendu. Ce n'est pas exactement thread-safe et peut être enclin à se bloquer.
Volomike
@Volomike - Vrai, mais si vous avez besoin de voir à quoi ressemble la page lorsqu'un navigateur l'exécute, il n'y a guère de meilleur choix. Les moteurs de rendu HTML ne vont jusqu'à présent qu'avec les pages lourdes en javascript d'aujourd'hui. La définition d'autorisations d'exécution et de délais d'expiration appropriés devrait limiter les difficultés et les risques liés à l'exécution d'un programme externe.
Adam Davis
5

Oui, ça l'est. Si vous avez seulement besoin d'une image d'URL, essayez ceci

<img src='http://zenithwebtechnologies.com.au/thumbnail.php?url=www.subway.com.au'>

Passez l'URL comme argument et vous obtiendrez l'image pour plus de détails, consultez ce lien http://zenithwebtechnologies.com.au/auto-thumbnail-generation-from-url.html

Mee
la source
2
Le service a été arrêté.
Mohammad Naji
5

Eh bien, PhantomJS est un navigateur qui peut être facilement installé sur un serveur et l'intégrer à php. Vous pouvez trouver le code dans WDudes. Ils ont inclus beaucoup plus de fonctionnalités telles que la spécification de la taille de l'image, le cache, le téléchargement en tant que fichier ou l'affichage dans img src, etc.

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

Paramètres d'URL

  • Largeur et hauteur: screenshot.php? Url = google.com & w = 1000 & h = 800

  • Avec recadrage: screenshot.php? Url = google.com & w = 1000 & h = 800 & clipw = 800 & cliph = 600

  • Désactivez le cache et chargez un nouveau screesnhot:
    screenshot.php? Url = google.com & cache = 0

  • Pour télécharger l'image: screenshot.php? Url = google.com & download = true

Vous pouvez voir le tutoriel ici: Capture d'écran d'un site Web en utilisant PHP sans API

Gijo Varghese
la source
Oh. Désolé pour ça. On dirait que le blog n'est plus. Essayez github.com/graphcool/chromeless @NarendraVerma
Gijo Varghese
4

cutycapt enregistre les pages Web dans la plupart des formats d'image (jpg, png ..) téléchargez-les depuis votre synaptique, cela fonctionne beaucoup mieux que wkhtmltopdf

Wolfgang
la source
3

Je me suis finalement installé en utilisant micro-écran / écran comme proposé par @boksiora.
Au départ, en essayant le lien mentionné ici, ce que j'ai obtenu:

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

Je suis sous Linux. Donc, si vous voulez l'exécuter, vous pouvez adapter mon suivi de pas à votre environnement.
Voici l'étape que j'ai faite sur mon shell sur le DOCUMENT_ROOTdossier:

$ 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

Pointez votre navigateur vers screen/demo/shot.php?url=google.com. Lorsque vous voyez la capture d'écran , vous avez terminé. Une discussion pour un réglage plus avancé est disponible ici et ici .

Chetabahana
la source
3

Il existe de nombreux projets open source qui peuvent générer des captures d'écran. Par exemple PhantomJS, webkit2png etc.

Le gros problème avec ces projets est qu'ils sont basés sur une technologie de navigateur plus ancienne et ont des problèmes pour rendre de nombreux sites, en particulier les sites qui utilisent des polices Web, flexbox, svg et divers autres ajouts aux spécifications HTML5 et CSS au cours des deux derniers mois / années.

J'ai essayé quelques-uns des services tiers, et la plupart sont basés sur PhantomJS, ce qui signifie qu'ils produisent également des captures d'écran de mauvaise qualité. Le meilleur service tiers pour générer des captures d'écran de sites Web est urlbox.io . Il s'agit d'un service payant, bien qu'il existe un essai gratuit de 7 jours pour le tester sans s'engager sur un plan payant.

Voici un lien vers la documentation , et ci-dessous sont des étapes simples pour le faire fonctionner en PHP avec composer.

// 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" />

Par exemple, voici une capture d'écran pleine hauteur de cette même page:

https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/8f1666d1f4195b1cb84ffa5f992ee18992a2b35e/png?url=http%3A%2F%2Fstackoverflow2%2F75 2F43652083% 2343652083 & full_page = true

capture d'écran pleine page de la question stackoverflow.com fournie par urlbox.io

cjroebuck
la source
3

Il y a beaucoup d'options et ils ont tous leurs avantages et leurs inconvénients. Voici la liste des options classées par difficulté d'implémentation.

Option 1: utilisez une API (la plus simple)

Avantages

  • Exécuter Javascript
  • Rendu presque parfait
  • Rapide lorsque les options de mise en cache sont correctement utilisées
  • La mise à l'échelle est gérée par les API
  • Calendrier précis, fenêtre d'affichage, ...
  • La plupart du temps, ils offrent un plan gratuit

Les inconvénients

  • Pas gratuit si vous prévoyez de les utiliser beaucoup

Option 2: utilisez l'une des nombreuses bibliothèques disponibles

Avantages

  • La conversion est assez rapide la plupart du temps

Les inconvénients

  • Mauvais rendu
  • N'exécute pas javascript
  • Pas de prise en charge des fonctionnalités Web récentes (FlexBox, Sélecteurs avancés, Webfonts, Box Sizing, Media Queries, balises HTML5 ...)
  • Parfois pas si facile à installer
  • Compliqué à l'échelle

Option 3: utilisez PhantomJs et peut-être une bibliothèque wrapper

Avantages

  • Exécuter Javascript
  • Tres rapide

Les inconvénients

  • Mauvais rendu
  • PhantomJs est obsolète et n'est plus maintenu.
  • Pas de prise en charge des fonctionnalités Web récentes (FlexBox, Sélecteurs avancés, Webfonts, Box Sizing, Media Queries, balises HTML5 ...)
  • Compliqué à l'échelle
  • Pas si facile de le faire fonctionner s'il y a des images à charger ...

Option 4: utilisez Chrome Headless et peut-être une bibliothèque d'encapsuleurs

Avantages

  • Exécuter Javascript
  • Rendu presque parfait

Les inconvénients

  • Pas si facile d'avoir exactement le résultat souhaité concernant:
    • synchronisation du chargement des pages
    • intégration de proxy
    • défilement automatique
    • ...
  • Compliqué à l'échelle
  • Assez lent et encore plus lent si le html contient des liens externes

Avertissement: je suis le fondateur d'ApiFlash. J'ai fait de mon mieux pour fournir une réponse honnête et utile.

Timothée Jeannin
la source
2

Je suis sous Windows, j'ai donc pu utiliser la fonction imagegrabwindow après avoir lu l'astuce ici de stephan. J'ai ajouté du recadrage (pour se débarrasser de l'en-tête du navigateur, des barres de défilement, etc.) et du redimensionnement pour obtenir une image finale. Voici mon code . J'espère que cela aide quelqu'un.

Robert James Reese
la source
1

webkit2html fonctionne sur Mac OS X et Linux, est assez simple à installer et à utiliser. Voir ce tutoriel .

Pour Windows, vous pouvez opter pour CutyCapt , qui a des fonctionnalités similaires.

Piskvor a quitté le bâtiment
la source
2
@Smith: La dernière fois que j'ai vérifié, CutyCapt a toutes les dépendances dans le programme d'installation. Oui, vous ne pourrez probablement pas l'installer sous un compte limité, mais c'est la vie. Notez que toutes les autres solutions utilisent une sorte de wrapper autour d'un noyau de rendu, vous êtes donc au même endroit avec elles.
Piskvor a quitté le bâtiment le
1

J'ai utilisé du bluga . L'API vous permet de prendre 100 instantanés par mois sans payer, mais il utilise parfois plus d'un crédit pour une seule page. Je viens de terminer la mise à niveau d'un module drupal, Bluga WebThumbs vers drupal 7 qui vous permet d'imprimer une vignette dans un modèle ou un filtre d'entrée.

Le principal avantage de l'utilisation de cette API est qu'elle vous permet de spécifier les dimensions du navigateur au cas où vous utiliseriez des CSS adaptatifs, donc je l'utilise pour obtenir des rendus pour la disposition mobile et tablette ainsi que la version régulière.

Il existe des clients api pour les langues suivantes:

PHP , Python , Ruby , Java , .Net C # , Perl et Bash (le script shell semble avoir besoin de perl)

Arosboro
la source
1

Vous pouvez utiliser la solution https://grabz.it .

Il a une API PHP qui est très flexible et peut être appelée de différentes manières, comme à partir d'un cronjob ou d'une page Web PHP.

Pour le mettre en œuvre, vous devrez d'abord obtenir une clé d'application et un secret et télécharger le SDK (gratuit).

Et un exemple de mise en œuvre. Tout d'abord l'initialisation:

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");

Et exemple de capture d'écran:

// 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");

Vient ensuite la sauvegarde. Vous pouvez utiliser l'une des deux méthodes de sauvegarde, Savesi le gestionnaire de rappel accessible au public est disponible et SaveTosinon. Consultez la documentation pour plus de détails .

Johnny
la source
Si vous recherchez des captures d'écran pleine page, ce fournisseur nécessite un abonnement professionnel (170 $ / an).
chaoskreator
1

J'ai écrit une application rapide et sale l'autre jour pour le faire en utilisant l'API Google. Des améliorations sont certainement possibles ...

  • Il utilise la dernière API Google version 5.
  • La taille de l'image est désormais large de 500 pixels
  • Prise en charge de la vue de bureau et mobile
  • Enregistrer dans un fichier dans un dossier spécifié
  • Intégrer un système de cache rudimentaire

Trouvez-le ici avec une démo et un code en direct .

Je n'ai pas posté le code ici simplement parce que je continue de l'affiner et j'espère que quand j'aurai le temps, le convertirai en une classe appropriée.

Fred
la source
0

J'ai utilisé page2images . Il est développé sur la base du cutycapt qui est vraiment rapide et stable. Si vous ne voulez pas consacrer trop de temps aux performances et à la configuration, vous devez l'utiliser. Si vous allez sur leur site Web, vous pouvez trouver plus de détails et un exemple de code PHP.

Chen
la source
0

Après beaucoup de surf sur le web, j'ai trouvé ça.

PPTRAAS > Un outil gratuit pour capturer une capture d'écran en passant votre URL comme paramètre

Ils offrent plusieurs options en appuyant simplement sur leur URL.

  1. Obtenez une capture d'écran pleine page

    https://pptraas.com/screenshot?url= {VOTRE URL ICI}

  2. Obtenez une capture d'écran de la page d'une taille spécifique

    https://pptraas.com/screenshot?url= {VOTRE URL ICI} & size = 400,400

  3. On peut même convertir la page en pdf

    https://pptraas.com/pdf?url= {VOTRE URL ICI}

Fenil Shah
la source
Josh, quand j'ai téléchargé la réponse, cela fonctionnait bien, je suppose que nous ne pouvons pas dépendre de cette URL, veuillez trouver une autre alternative car ils pourraient avoir arrêté le service pour l'instant
Fenil Shah
0

Vous pourriez faire 2 choses.

Utilisez Puppeteer

Vous pouvez utiliser le package PHP Puppeteer pour faire tourner un navigateur et prendre une capture d'écran.

Utilisez une API

Il existe de nombreuses API de capture d'écran. Vous pouvez regarder ScreenshotAPI.net par exemple. (Avertissement, je suis le créateur de cette API)

Dirk Hoekstra
la source
-1

Pas directement. Des logiciels tels que Selenium ont des fonctionnalités comme celle-ci et peuvent être contrôlés par PHP mais ont d'autres dépendances (telles que l'exécution de leur serveur Java sur l'ordinateur avec le navigateur que vous souhaitez capturer)

Macha
la source
Il existe maintenant de nombreuses bibliothèques PHP. Pas exactement une bibliothèque 'PHP'. Implique certains navigateurs et codes js.
Gijo Varghese
-1

vous pouvez utiliser cutycapt.

kwhtml est obsolète et affiche la page comme l'ancien navigateur.

mohammad inanloo
la source
-1

J'ai trouvé que c'était l'outil le meilleur et le plus simple: ScreenShotMachine . C'est un service payant, mais vous obtenez 100 captures d'écran gratuites et vous pouvez en acheter 2000 autres pour (environ) 20 $, c'est donc une très bonne affaire. Il a une utilisation très simple, vous utilisez simplement une URL, j'ai donc écrit ce petit script pour enregistrer un fichier basé dessus:

<?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!");
?>

Ils ont une très bonne documentation ici , donc vous devriez certainement y jeter un œil.

Yaakov Ainspan
la source