[Résolu] Capture d'écran d'une page web

Bonjour tout le monde,

Lecteur occasionnel du forum Alsacreation depuis quelques années, je n'ai encore jamais eu besoin de créer un sujet, mais aujourd'hui, mes recherches all over the web ont été vaines.

La question : j'aimerai savoir comment (ou même simplement si c'est possible), de capturer une page web et la rendre à un format d'image (png, jpg, ...) ?

Pour être plus précis, il s'agit de capturer le contenu d'une div, contenant d'autres div, elles-même contenant des images.

A terme, ça permettrait de "composer" une image à partir de plusieurs morceaux d'image.

Je ne sais pas si je suis très clair, mais si toutefois ma question à besoin d'être clarifiée, n'hésitez pas à poser des questions.

Pour note, mes recherches m'ont mené au HTML2Canvas, qui permet de capturer une div et de la rendre au format image, mais celui-ci ne tient compte que du DOM, les images restant donc invisible lors de la capture.

Voilà voilà,

Merci par avance !
Modifié par CKVTDN (20 Dec 2016 - 08:30)

Bonjour Dew et merci de ta réponse,

L'idéal serait que ce soit utilisable par n'importe qui, je pense à un input qui permette d'effectuer un screenshot au moment voulu.

En fait, il s'agit d'une petite expérience graphique. A terme, j'aimerai que ce soit un "créateur d'avatar", le plus simplement du monde : des div empilées, des images qui défilent horizontalement, se superposent, et hop, screenshot. On a un avatar.

Le javascript, je sais le reconnaître et le comprendre laborieusement, mais l'écrire, loin de là. Et je ne pense pas que ce soit possible en utilisant simplement du CSS et du HTML.
Modifié par CKVTDN (20 Dec 2016 - 10:07)

CKVTDN a écrit :
Bonjour tout le monde,

Lecteur occasionnel du forum Alsacreation depuis quelques années, je n'ai encore jamais eu besoin de créer un sujet, mais aujourd'hui, mes recherches all over the web ont été vaines.

La question : j'aimerai savoir comment (ou même simplement si c'est possible), de capturer une page web et la rendre à un format d'image (png, jpg, ...) ?

Pour être plus précis, il s'agit de capturer le contenu d'une div, contenant d'autres div, elles-même contenant des images.

A terme, ça permettrait de "composer" une image à partir de plusieurs morceaux d'image.

Je ne sais pas si je suis très clair, mais si toutefois ma question à besoin d'être clarifiée, n'hésitez pas à poser des questions.

Pour note, mes recherches m'ont mené au HTML2Canvas, qui permet de capturer une div et de la rendre au format image, mais celui-ci ne tient compte que du DOM, les images restant donc invisible lors de la capture.

Voilà voilà,

Merci par avance !

Bonjour,
Il existe une librairie Java dénommée WebVector permettant de récupérer une page HTML sous forme d'image SVG.
Je réponds depuis un téléphone portable aussi n'ais-je pas le lien sous la main, mais j'en ai parlé sur mon blog consacré au générateur HTML que je développe (cf. Ma signature - Article intitulé "Passer l'aspirateur", copies d'écrans).
Le résultat est assez bluffant et le code source Java est disponible sur Github.

Bonjour Audrasjb,

Merci de ta réponse !

C'est très intéressant. Si je me réfère au topic que tu as linké :

You are missing the preload of images, which itself is asynchronous, so you'll need to wrap it in callbacks. You are probably using an older version as well, so I'd recommend getting the latest version from https://github.com/niklasvh/html2canvas/downloads and then testing with:

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

Alors, ça va peut-être en agacer certains, mais comme cité plus haut, le js, je n'y connais pas grand chose, ledit code, ou dois-je l'insérer ? Dans le fichier JS HTML2Canvas ? Et à quel endroit ?

Merci encore pour ton retour.

Hello,
Tu peux l'ajouter dans un autre fichier externe (appelé après le fichier html2canvas.js) ou dans une balise <script></script> (idem, après l'appel de html2canvas.js).

De mon côté, j'avais quelque chose comme ça :

<script src="js/html2canvas.js"></script>
<script>
// On prend une photo [smile]
$('.configurateur-face').html2canvas({
     		onrendered: function (canvas) {
           		$('#config_val_face').val(canvas.toDataURL("image/png"));
            	}
});
</script>

Mais mon objectif était de récupérer l'image au format base64 pour l'envoyer sur une autre page, donc c'est un autre besoin je pense…

Bonjour tout le monde,

Désolé pour le retour tardif, pas eu le temps de vérifier et de tester tout ça avec les fêtes de noël.

C'est maintenant chose faite.

Tout fonctionne parfaitement grâce aux quelques lignes js supplémentaires. C'est pile ce que je voulais en théorie, me reste plus qu'à coder tout ce que j'ai en tête pour l'appliquer.

Merci à tous !