Les images en PHP

  1. l'an dernier

    bernard ng

    20 Nov 2017 Modérateur User since 2017
    Edité l'an dernier par bernard ng

    Bonjour à tous,
    aux développeurs PHP je vous propose de découvrir une librairie très intéressante sur les traitements des images il s'agit de intervention/image

    Installation

    Pour avoir intervention/image il suffit de taper la ligne suivante dans votre terminal :

    composer require intervention/image

    bien sûr vous devez avoir composer d'installer sur votre ordinateur et avoir un projet déjà initialiser avec composer. Vous devez aussi possédez une version de PHP supérieur à 5.3 et l'extension fileinfo

    Utilisation

    Pour avoir une instance de intervention\image\ImagerManager

    // inclusion de l’auto loader de composer
    require 'vendor/autoload.php';
    
    // importez la classe Intervention Image Manager
    use Intervention\Image\ImageManager;
    
    // création d'une instance de ImageManager avec un driver au choix
    $manager = new ImageManager(array('driver' => 'imagick'));

    si vous ne précisez pas le driver intervention/image charger le driver Gd, si vous souhaitez utiliser imagick vous devez possédez l'extension imagick de PHP.

    maintenant que nous avons notre $manager nous allons pouvoir effectuer les différentes opérations sur les images : les créer, les redimensionner, les roter, etc...

    Exemples

    je voudrais redimensionner une image "image.jpg" de n'importe quel taille se trouvant au même niveau que mon script PHP en 500x500 et la sauvegarder en "thumb.jpg" pour cela j'utilise mon $ImageManager:

    $manager->make('image.jpg')->fit(500, 500)->save('thumb.jpg');

    La plupart des méthodes retournent une l'instance courante de notre image ce qui va nous permettre d’enchaîner les opérations.

    $image = $manager->make('image.jpg');
    $image->resize(500, 500)->save('thumb.jpg');

    la méthode "save" permet de sauvegarder l'image dans le chemin lui indiquer en paramètre, par contre si je veux renvoyer l'image au navigateur (exemple un capcha) la méthode "response" est préférable, et on peux lui préciser en paramètre le format et la qualité que l'on désire utiliser.

    $image = $manager->make('image.jpg');
    echo $image->fit(150, 150)->response('jpg', 90);

    Ici le navigateur va afficher une image de 150x150 de format jpg et de qualité 90

    la méthode "fit" crop l'image mais "resize" redimensionne sans tenir compte des proportions de l'image. je vous conseil d'utiliser "fit" pour les photos d'avatar par exemple.
    On peut aussi roter une image avec la méthode "rotate" en lui précisant le degré de rotation en paramètre

    $image = $manager->make('image.jpg');
    echo $image->rotate(180)->fit(500, 500)->response('jpg', 90);

    Attention l'ordre des méthodes est très important! dans notre cas on rote l'image avant de la redimensionner, si la méthode "rotate" vient après "fit" alors intervention va d'abord redimensionner l'image ensuite la roter.
    On peut redimensionner une image en gardant son ratio pour cela il nous suffit dans la méthode "resize" de passer "null" pour la hauteur et ensuite en troisième paramètre passer une closure qui prend en paramètre une contrainte

    $image = $manager->make('image.jpg');
    echo $image->resize(500, null, function($contrainte){
                                   $contrainte->aspectRatio(true)
                                   $contrainte->$upsize();
                      })->response('jpg', 90);

    En effet vous pouvez nommer la contrainte comme vous voulez.

    $image = $manager->make('image.jpg');
    echo $image->resize(500, null, function($c){
                                   $c->aspectRatio(true)
                                   $c->$upsize();
                      })->response('jpg', 90);

    la méthode "upsize" va agrandir l'image à 500px de largeur si celle-ci est inférieur à 500px.
    Dans mes exemples j'ai renvoyé directement l'image au navigateur, si vous voulez la sauvegarder utiliser la méthode "save" en lui passant en paramètre le chemin vers lequel vous désirer sauvegarder votre image.

    Cas de site Web

    Ici je vais vous montrer comment gérer des images uploader par des utilisateurs de votre site.

    j'imagine que j'ai un formulaire d'uplaod d'image dans une des pages web

    <form action="" method="POST" [b]enctype="multipart/form-data"[/b]>
            <input type="file" name="image_up">
            <button type="submit">uploader une image</button>
    </form>

    et dans mon code PHP

    <?php
    if (isset($_FILES['image_up']['tmp_name']) && !empty($_FILES['image_up']['tmp_name'])) :
            $manager = new ImageManager();
            $manager->make($_FILES['image_up']['tmp_name'])
                           ->fit(300,300)
                           ->save('/uploads/image.png')
                           ->destroy();
    endif;
    ?>

    j'enregistre l'image au format "png" ici, mais vous pouvais mettre le format qui vous chante, pourvu que sa reste une image.
    Vous remarquez qu'à la fin j'ai fait appel à la méthode "destroy", en effet les opérations qu'effectue intervention demandent une mémoire énorme alors il faut libérer cette mémoire à la fin du traitement afin d’éviter que PHP vous claque entre les doigts :-D. (plante)
    Voilà comment on peut gérer le cas d'upload fait par les utilisateurs, bien sûr il faut vérifier que le fichier est bien une image, la taille etc...

    Mise en Pratique

    Nous allons maintenant voir comment nous pouvons mettre en pratique ce que nous venons d'apprendre. Nous allons tout simple crée un captcha de deux manières traditionnellement (en procédural) et avec intervention/image (orienté objet)

    <?php
    $nombre = mt_rand(1000, 9999);  //on génère un chiffre entre 1000 et 9999
    $font = "my_font.ttf";  //chemin vers notre police [b]Truetype[/b]
    $img = imagecreate(150,50); //on crée une image de 150x50 pixels
    $bgColor = imagecolorallocate($img, 255, 255, 255); // on définie la couleur de fond pour l'image $img en rgb
    $textColor = imagecolorallocate($img, 0, 0, 0); // on définie la couleur du texte pour l'image $img en rgb
    
    /*
    * on définie la taille de la police 23
    * on écrit sur l'image $img, on position le texte 0,25 
    * on définie l'angle 30
    * on définie la couleur du texte
    * on définie la police
    * on définie le texte proprement dit ici $nombre
    */
    imagettftext($img, 23, 0, 25, 30, $textColor, $font, $nombre);
    
    imagejpeg($img); // on crée l'image proprement dit en jpeg
    imagedestroy($img); // on libère la mémoire histoire d’éviter que PHP nous claque entre les doigts :-D
    header("Content-Type:image/jpeg"); // on "dit" au navigateur que l'on renvoi une image de format jpeg
    exit();  // fin du script
    ?>

    vous êtes d'accord avec moi c'est vraiment beaucoups à faire et à retenir surtout pour les fonctions d'images, c'est pas grave on va voir comment se simplifier la vie avec intervention/image.

    $nombre = (str) mt_rand(1000,9999); // on converti en string pour éviter des mauvaises surprises
    $police = realpath("../my_font.ttf");   //chemin vers ma police (en absolu c'est très important )
    
    $manager = new ImageManager();  // importez intervention/image/ImageManager avant !
    $img = $manager->canvas(150, 50, "#fff")       //création de l'image
            ->text($nombre, 0, 0, function($font) use ($police) {
                            $font->file($police);   
                            $font->size(23)                  
                            $font->color('#000');          
                            $font->valign('top');            // aliment vertical
                })
            ->save("captcha.png") 
            ->destroy();
    exit();
    ?>

    Utilisation du captcha crée

    Dans le premier cas il faudra faire appel directement au script PHP qui génère le captcha, et vous pouvez mettre la valeur du captcha dans la session c'est à dire

    <?php
    session_start();
    $nombre = mt_rand(1000, 9999);
    $_SESSION['captcha'] = $nombre;
    ?>
    
    <img src="captcha.php" title="captcha">

    et verifier si la valeur que l'utilisateur va entrer correspond à l'index captcha dans la $_SESSION.

    Dans le deuxieme cas il faudra juste faire appel à l'image générée

    <?php
    //on imagine qu'on a un controlleur qui charge la page où doit être l'image captcha
    //on pourrait avoir une méthode qui appel le générateur de captcha avant que la ne page soit charger, comme sa la valeur afficher par l'image captcha sera la même que cela qui sera dans la $_SESSION.
    
    <img src="captcha.png" title="captcha">
     

    voilà comment on peut facilement crée un captcha en orienté objet.
    Le code en objet est relativement simple et facilement compréhensible, j’espère que vous êtes du même avis que moi si c'est pas le cas veuillez réagir, si j'ai ne pas étais claire quelque part veuillez aussi me le faire savoir. merci.

    Conclusion

    Intervention/image propose un assez grand nombre de méthodes, il serait beaucoup trop long de les énumérer ici donc n'hésitez pas à faire un tour sur la documentation .

    Pour plus d'explications voici un tutoriel

  2. Jeanluc

    25 Nov 2017 Modérateur User since 2017

    Nous avons aimez ce tuto, merci @bernard ng

  3. bernard ng

    25 Nov 2017 Modérateur User since 2017

    je t'en pris

 

ou S'incrire pour répondre!