générer automatiquement des images sur un site

    jeudi 31 août 2017, par Jimv

      Version imprimable de cet article Version imprimable

      JPEG - 29.5 ko

      L’idée c’est pour le site jardinsorgues.free.fr de générer automatiquement une image représentant l’état des jardins à une date à partir d’une base de données sql.

      C’est un peu comme quand on fait la cuisine : il faut un frigo, une gazinière, des instruments et des ingrédients et beaucoup d’amour.



    •  au départ c’est une histoire de calques.
      Ce sont les architectes qui utilisaient au départ cette technique.
      un fond et ensuite on empile dessus différents calques (eau, électricité , ameublement...) On parle ici du "papier calque" qui est transparent.
      une fois le résultat validé on faisait un "tirage" tireuse de plans) de tout cela pour ne plus avoir qu’une seule image.
      JPEG - 24.2 ko

      Et bien c’est ce que nous allons faire, mais informatiquement, grâce à des programmes comme photoshop (payant) ou GIMP (logiciel libre gratuit).



    •  la construction des images
      Pour cette affaire, je suis parti d’une copie d’écran de Google Earth comme vous pouvez le voir dans cette vidéo.

      Donc, en avant, faisons des calques dans toshop ! (vous voyez qu’il y a des calques allumés et d’autres éteints).

      JPEG - 10.8 ko

      Il y en a un paquet : 115 je crois répartis dans plusieurs groupes.
      J’ai tout décomposé : les titres et toutes les images... et les ai regroupés dans des groupes.

      • le fond vert
      • les titres
      • les cabanes
      • les tonnes d’eau
      • les chemins
      • le tracé des jardins
      • le canal
      • les friches
      • ...

      c’est plus facile à gérer par la suite.

    •  On va avoir besoin de quelques images transparentes :
      • un fond : c’est quand tout va bien (une image de la taille finale)
      • une image de friches pour chaque jardin (transparente).
        Bien sur on enregistre toutes les images pour le Web en png (transparence oblige).
        et pour les "friches" le nomage est du genre "20-friche.png", donc le numéro de la friche en premier, ce qui va nous permettre de les chercher un peu plus tard dans les requêtes sur la base de donnée.
      • une image qui vient dessus et finalise (transparente).

      Voilà les images (je ne vous en montre qu’une pour les friches).

      Bien entendu, toutes ces images sont transférées sur le site.

      il va falloir les agencer, mais avant toute chose avoir une base de données...

      JPEG - 8.5 ko
      le fond
      JPEG - 29.1 ko
      il y en a 27 comme çà
      JPEG - 38.3 ko
      le dessus













    •  La base de données
      JPEG - 22.7 ko

      J’utilise "Forms&Tables 2.0->https://contrib.spip.net/Forms-T" sous Spip, c’est un peu caca-boudin, mais ça a l’avantage que je puisse tout modifier dans mon espace privé.

    •  Il n’y a qu’un enregistrement que je peux modifier, c’est un choix.
      • il comporte le numéro du jardin (et j’ai créé des jardins factices pour le canal, les terrains de la mairie, les traverses ...
      • il y a l’état pour chaque "jardin" : entretenu ou en friche.
      • et une date de mise à jour.
    •  Comment manipuler ces images ?

      Il faut les manipuler "dynamiquement" et donc utiliser un langage de programmation .

      Votre navigateur internet ne comprend que le html qui n’est pas un langage de programmation , mais un « langage de marquage hypertexte » donc forcément statique.

      Mais il y a des langages capables de produire du html "à la volée". C’est le cas de PHP (PHP Hypertext Preprocessor) qui comme son nom l’indique va créer du html avant son affichage par le navigateur. Ce système est installé (ou non) sur le serveur Web où se font les calculs.

      Donc on va utiliser PHP (libre de droits).

      • Pour la superposition des images

      On va utiliser une bibliothèque php qui s’appelle GD.
      GD vient de l’anglais Gif Draw (dessiner un GIF)...
      et dans la dernière version le Gif n’est plus supporté !
      Il faut dire que le Gif est un format propriétaire alors que jpeg et png sont libres de droits.

      Par chance PHP et GD sont activés automatiquement chez Free.fr

    •  On se lance dans le code PHP

      Grâce à lui on va manipuler les images et la base de données dans un fichier nommé délicatement "constructplan2.php".

      • On charge notre image de base "vertfond" (le fond) qui est le départ de notre $destination grâce à

      imagecreatefrompng("images/vertfond.png") ;
      on charge ses dimensions par
      $largeur_source = imagesx($destination) ;
      $hauteur_source = imagesy($destination) ;

      • on cherche dans la base tous les "jardins" que nous avons jugés en friches.
        Pour chacun de ceux-là (une boucle) on va superposer leur image à l’initiale.

      début de la boucle $num=$data[’valeur’] ; // c’est pour cela que le nomage des images est important
      $lien="images/".$num."-friche.png" ;
      $source = imagecreatefrompng($lien) ;
      // Création des images des friches
      imagecopy($destination, $source, $destination_x, $destination_y, 0, 0, _ _ $largeur_source, $hauteur_source) ;


      fin de la boucle

      JPEG - 10.6 ko
      1ére friche
      JPEG - 11 ko
      2ème friche ...
      JPEG - 15.8 ko
      ... à la fin











      • il est temps de mettre notre calque du dessus

      $source1 = imagecreatefrompng("images/dessus.png") ;
      imagecopy($destination, $source1, $destination_x, $destination_y, 0, 0, $largeur_source, $hauteur_source) ;

      JPEG - 44 ko
      • reste à écrire la date de mise à jour.
        Oui on peut écrire sur une image en php.
        Plus fort on peut choisir la police, sa couleur, sa taille ...
        Comme dans photoshop nous avons utilisé la police "Gotham", on la télécharge sur le site : pour la petite histoire c’est la police de caractères qu’a utilisé Barack Obama durant sa campagne électorale de 2008.
        On reprend aussi les couleurs des textes des images

      // Définition de la variable d’environnement pour bibliothèque GD putenv(’GDFONTPATH=’ . realpath(’.’)) ;
      $font = ’Gotham-Medium’ ; // Nom de la police à utiliser (installée sur le site)
      $marron = imagecolorallocate($imagedate, 100, 52, 0) ;
      // traitement
      imagefttext($imagedate, 22, 0, 350, 1004, $marron, $font, ’* mise à jour ’.$datesursite .’ *’) ;
      imagecopy($destination, $imagedate, $destination_x, $destination_y, 0, 0, $largeur_source, $hauteur_source) ;

      JPEG - 30.1 ko
      image définitive

      Vous voyez c’est pas bien compliqué.Sauf que je n’y serais pas arrivé sans ce tutoriel de openclassrooms.


      Ici le code complet php :

      PDF - 22.4 ko
      Code php complet
      • qrcode:http://jeanmichelvideau.com/?generer-automatiquement-des-images
        Flasher pour voir cette page "générer automatiquement des images sur un site" sur votre mobile (explications)

        Répondre à cet article

        © 2002 - 2017  jeanmichelvideau.com
        Site réalisé avec SPIP v 2.1.24
        hébergé par OUVATON hébergement coopératif
        Suivre la vie du site RSS 2.0 | Plan du site