Les langages de programmation du Web

Précédent Sommaire 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Suivant

9. Création d'image dynamique

Un langage serveur (PHP, CGI) ne se limite pas à la génération de pages HTML ou de texte brut.
Il peut aussi servir à créer et manipuler des images, dans un grand choix de formats (GIF, PNG, JPEG...).

Les scripts suivants construisent une image au format PNG (type MIME image/png) :

php Exemple : un camembert 2D en PHP

En PHP, on utilise la bibliothèque libre GD pour générer des images.
Cette bibliothèque est installée par défaut avec WampServer.

Localisation du script c:/wamp/www/isn/camembert.php
URL http://localhost/isn/camembert.php

<?php
header("Content-Type: image/png");

// Création de l'image (300 px * 300 px)
$image imagecreate(300300);

// Couleur de fond (blanc)
$background  imagecolorallocate($image0xFF0xFF0xFF);

// Définition de quelques couleurs
$red  imagecolorallocate($image0xFF0x000x00);
$gray imagecolorallocate($image0xC00xC00xC0);
$navy imagecolorallocate($image0x000x000x80);

// Dessine un arc partiel et le remplit
imagefilledarc($image150150200200060$navyIMG_ARC_PIE);
imagefilledarc($image15015020020060150$grayIMG_ARC_PIE);
imagefilledarc($image150150200200150360$redIMG_ARC_PIE);

// Ecriture en sortie (print)
imagepng($image);
imagedestroy($image);
?>

Voir

Ensuite, vous pouvez parfaitement enregistrer cette image sur votre Bureau :
Firefox : Clic droit → Enregistrer l'image sous...

python Exemple : un camembert 2D en CGI-Python

Nous avons besoin de la librairie PIL (Python Imaging Library).
Cette librairie spécialisée de Python fournit des outils de traitement d'images.
PIL n'est pas présente par défaut.
Il faut donc la télécharger et l'installer.

Installer la librairie PIL

Localisation c:/wamp/bin/apache/apache2.2.22/cgi-bin/camembert.py
URL http://localhost/cgi-bin/camembert.py

#! c:/Python27/python.exe
# -*- coding: utf-8 -*-
# script camembert.py

from PIL import Image,ImageDraw
import cStringIO
import sys

if sys.platform == "win32":
    # write binary output to stdout (Windows OS only)
    # autrement \n (0x0A) est transformé en \r\n (0x0D 0x0A)
    import os,msvcrt
    msvcrt.setmode(1,os.O_BINARY)

print "Content-type: image/png\n"

# création d'une image 300x300 (fond blanc)
img Image.new("RGB",(300,300),"#FFFFFF")

# création d'un objet Draw
dessin ImageDraw.Draw(img)

# dessine un arc partiel et le remplit
dessin.pieslice((50,50,250,250),0,60,fill="blue")
dessin.pieslice((50,50,250,250),60,150,fill="gray")
dessin.pieslice((50,50,250,250),150,360,fill="red")

cStringIO.StringIO()
# sauvegarde de l'image dans un buffer
img.save(f,"PNG")
# écriture en sortie (print)
sys.stdout.write(f.getvalue())

Exercices

Exercice 1 Image dynamique en PHP

Créer l'image dynamique suivante (camembert_ex.php) :

camembert

Bibliographie : Fonction imagestring()

Exercice 2 Image dynamique en PHP

Pour limiter le pillage par les robots d'indexation des informations présentes dans les pages Web, on peut indiquer les numéros de téléphone sous forme d'image.
Par exemple :
telephone

Ecrire le script PHP de l'image de votre numéro de téléphone (telephone.php).

Exercice 3 Image dynamique en PHP

Pour faire cet exercice, vous devez connaître la méthode GET (Cf. chapitre 11).

Ecrire le script camembert_get.php d'un camembert à deux secteurs (un rouge et un vert).
Le pourcentage du secteur vert sera transmis dans l'URL par la méthode GET.
Par exemple : camembert_get.php?pourcentage=73

camembert_get.php