Capture d’écran et transformation de Div en image avec Javascript/PHP

Publié le 15 février 2013 - Developpement Web. Tags : , ,

Si vous avez déjà eu affaire avec une problématique de transformation de certaines div de votre site en images, ou que vous ayez eu besoin de faire une capture écran d’un site distant, vous avez du vous rendre compte que la tâche était loin d’être évidente.

S’il est facile de créer des images avec PHP (grâce à l’extention GD notamment), il est beaucoup plus compliqué de manipuler tout ou portion de site de la sorte. Pourtant, ce travail est souvent bien utile : que ce soit pour générer des PDF à la volée (les librairies les plus connues telles que TCPDF interprétant mal les classes CSS), transformer une div en image pour des besoins SEO ou plus simplement proposer une vignette à la façon de thumbshots.org; vous aurez besoin d’une solution.

Malheureusement, rien n’existant nativement, il faut trouver des astuces. Si vous recherchez des mots clés tels que « div to image », « PHP screenshot » et j’en passe, vous vous rendrez vite compte que les résultats gravitent  tous autours d’un même script: html2canvas.

Html2canvas vous permet de capturer des pages entières ou des portions de celles-ci, via le navigateur de vos visiteurs. Le screenshot est basé sur le DOM, c’est à dire qu’il ne représente pas directement ce qu’il y a à l’écran, mais qu’il interprète ce qu’il est sensé y avoir à l’écran. Petite nuance pour préciser que ce n’est donc pas une capture forcément 100% identique à ce que vous pouvez voir à l’écran, du moins théoriquement, parce que dans les faits, c’est complètement conforme.

Le seul petit problème de cet outil, c’est son manque d’explications. Même si cela reste simple à mettre en œuvre, ce n’est pas forcément évident pour tout le monde, selon son niveau. Je vais donc brièvement expliquer comment intégrer ce système sur son site.

La première chose à faire, c’est de télécharger (ou copier/coller) le fichier, puis de l’inclure dans votre page.  Sachant qu’il s’agit d’un script jquery, il vous faut insérer les lignes suivantes dans votre <head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="lienvers/html2canvas.js"></script>

Ensuite, vous devez paramétrer html2canvas selon vos objectifs. Dans cet exemple, nous allons convertir une partie du site en image, et l’enregistrer. Pour cela nous ajoutons les lignes suivantes (à la suite):

<script language="javascript">
$(document).ready(function() {
	var capture = {};
	var target = $('#ma-div');
	html2canvas(target, {
		onrendered: function(canvas) {
			capture.img = canvas.toDataURL( "image/png" );
			capture.data = { 'image' : capture.img };
			$.ajax({
			url: "/ajax.php",
			data: capture.data,
			type: 'post',
			success: function( result ) {
				console.log( result );
			}
			});
		}
	});
});
</script>

Au chargement de la page, une capture écran de la div « #ma-div » (remplacer par « body » pour capturer toute la page) sera effectuée, et le résultat envoyé à la page de traitement ajax.php.

Attention : l’erreur traditionnelle consiste à ajouter une div spécifique pour délimiter une partie du site à enregistrer; cependant, si vous avez des div flottantes, cette div n’affichera probablement rien (tout dépend de la structure). Il faut donc s’assurer qu’il y ait réel un rendu du block sur le navigateur. Vérifiez avec FireBug au besoin. Notez qu’il est aussi possible de remplacer la div ainsi convertie par son résultat (se référer aux fonctions jQuery).

Maintenant, il ne nous reste plus qu’a créer la page de traitement du formulaire envoyé, ajax.php, dont voici le contenu :

<?php
$save = str_replace('data:image/png;base64,', '', $_POST['image'] );
file_put_contents( 'img/image.png', base64_decode( $save ) );
?>

Ici, nous envoyons donc la copie dans un dossier img/ (pensez aux droits en écriture), mais il est bien sûr possible de faire ce que vous voulez, comme par exemple passer des variables supplémentaires à ‘data’ et créer dynamiquement des noms d’images. N’oubliez pas de sécuriser tout ceci, l’exemple est volontairement simple.

De la même façon, vous pouvez redimensionner, rogner les images, etc.

Et voilà !

nb. Si vous voulez capturer une page distante, commencez  votre lecture sur cette page, car les problèmes sont plus nombreux.


Articles sur ce thème :
Aucun article lié.