Cours PHP/GD.
Réponse AJAX

Information sur...la librairie GD en PHP.

La librairie GD (Graphic Device) permet de manipuler des images en PHP, avec deux approches différentes :

Les résultats seront, au choix :

Exemples d'application

J'ai déjà utilisé la librairie GD sur :

D'autres exemples :

Initiation à partir d'une image existante

Afficher la taille d'une image existante : getimagesize

Pour nos tous premiers pas avec la librairie GD, nous allons utiliser une fonction qui travaille sur un fichier image (déjà existant) et qui va renvoyer la taille en pixel de cette image.

Pour ce nouveau TP, créez un répertoire v_anonyme_gd sous la racine internet de Apache.

Dans ce répertoire, placez une image quelconque. Attention à un piège très fréquent : lorsque Windows vous dit qu'une image est de type jpeg, son extension est le plus souvent .jpg et non pas .jpeg.

Dans ce même répertoire, créez un fichier image.php dans lequel vous allez créer le code PHP suivant.

En vous aidant de la documentation de getimagesize, essayez tout seul d'écrire le code qui va afficher la largeur et la hauteur (en pixels) de l'image (remarquez bien que getimagesize renvoie comme résultat un tableau). Collez ici le code PHP qui affiche cette taille :

Votre réponse n°1

Si ça ne marche pas, vérifiez le chemin d'accès à votre image. Le plus simple est de travailler en chemin relatif, avec l'image dans le même répertoire que la page PHP.

Griser une image existante puis la sauver sous forme de fichier

Grâce à la librairie GD, nous allons charger une image JPG, la griser, puis la sauvegarder dans un nouveau fichier jpeg :

Grâce à l'aide des fonctions ci-dessus, essayez de réaliser cette fonctionnalité. Pour vous aidez, sachez que imagecreatefromjpeg reçoit 1 paramètre, imagefilter reçoit 2 paramètres et imagejpeg reçoit 2 paramètres. Collez ici votre code PHP :

Votre réponse n°2

Précision sur... le format d'image en entrée et en sortie.

On manipule ici deux formats d'images qui peuvent être différents :

Griser une image existante puis l'envoyer dans le navigateur

Le fonctionnement est identique qu'à l'étape précédente sauf que :

Une fois de plus, débrouillez-vous (il y a peu de choses à modifier par rapport à l'étape précédente) puis collez votre code ici :

Votre réponse n°3

Faire un lien depuis une page web vers notre image.php

Explications...

Le but est de pouvoir insérer ces images, comme n'importe quelle autre image, dans nos pages Web. Heureusement, on peut le faire de façon complètement naturelle avec une balise image qui ressemblera à :

<img src=image.php>

Remarquez l'extension, qui est .php au lieu de .jpg, .png, etc. On peut donc faire une balise image qui pointe vers notre fichier PHP, puisqu'il génère lui-même une image.

Créez un autre fichier que vous appelez par exemple page.php

Dans ce nouveau fichier, tapez un texte de présentation puis la balise HTML pointant vers votre image :
<img src=image.php>

Après avoir vérifié que tout marche, collez ici le code de page.php :

Votre réponse n°4

Initiation à partir d'une nouvelle image

GD permet aussi de créer une image à partir de rien. Au lieu d'utiliser imagecreatefrom..., on utilise imagecreatetruecolor :
resource imagecreatetruecolor ( int $width , int $height)
- les paramètres sont la largeur et la hauteur de la nouvelle image (en pixels),
- le résultat est :

Nous allons créer une nouvelle image puis tracer une ligne à l'intérieur, comme ça :

Dans un premier temps, créez l'image (400x300) avec imagecreatetruecolor (elle sera automatiquement avec un fond noir)

Ensuite, créez une ressource "couleur" (rouge, par exemple) grâce à imagecolorallocate.

Ensuite, tracez une ligne (imageline) depuis les coordonnées (20, 20) jusqu'aux coordonnées (380, 280).

Affichez l'image comme avant (avec header et imagejpeg), vous testerez à partir de page.php ou image.php (les deux devraient marcher).

Essayez, lorsque ça marche collez votre code ici :

Votre réponse n°5

Mise en pratique de tout ce qui précède

Nous allons faire un script PHP europe.php qui reçoit dans l'URL des coordonnées (abscisse, ordonnée) et génère l'image de l'Europe marquée d'une croix rouge à ces coordonnées, de cette façon :

Utilisez la carte d'europe ci-contre (cliquez pour la télécharger), sauvez-la dans le répertoire v_anonyme _gd.

le script recevra en paramètre (en URL, de type $_GET) des coordonnées en pixels, de 0 à 480 / 488 (taille de l'image). Par exemple, on appellera le script ainsi :
http://127.0.0.1/ v_anonyme _gd/europe.php?x=200&y=210
Tenez-en compte en écrivant votre script (vous travaillerez avec les coordonnées $_GET["x"] et $_GET["y"]).

Votre script doit :

Collez votre code ici :

Votre réponse n°6

Incrustation automatique d'un Watermark dans une image

Watermark simple (sans transparence)

Un Watermark, c'est votre logo (où le logo de votre site) que vous inscrustez discrètement sur les images de vos sites, pour faire respecter votre droit d'auteur ou améliorer votre communication.

La page suivante (qui n'est pas de moi) vous explique comment faire, suivez ce tutoriel pour le faire fonctionner vous-même :

http://articles.sitepoint.com/article/watermark-images-php

Collez votre code ici :

Votre réponse n°7

Créez une image png transparente pour votre Watermark

Grâce à votre logiciel de dessin préféré (GIMP ?), créer une image avec transparence pour faire office de Watermark. Sous GIMP, vous aurez besoin :

Le but sera d'obtenir, au final, quelque chose qui ressemble à ça (après incrustation du watermark dans une photo) :

    

Mais... mais... y'a rien qui marche ! Et la transparence alors ?

En effet, la fonction GD imagecopymerge ne tient pas compte de la transparence. Aurait-on fait tout ça pour rien ?

Heureusement, dans les commentaires de imagecopymerge sur php.net, vous allez trouver quelqu'un qui s'est penché sur la question et qui a créé une fonction imagecopymerge_alpha. Elle marche exactement pareil, vous n'avez qu'à :

Normalement, maintenant, ça marche.

Collez ici l'ensemble du code de cette dernière étape :

Votre réponse n°8