[GD] Redimensionner une image sans la déformer

Formation

En Semi-présenciel Paris

Prix sur demande

Appeler le centre

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Description

  • Typologie

    Formation

  • Méthodologie

    En semi-présentiel

  • Lieu

    Paris

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Les sites et dates disponibles

Lieu

Date de début

Paris ((75) Paris)
Voir plan
7 Cité Paradis, 75010

Date de début

Consulter

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Les matières

  • Image

Le programme

Introduction du cours

Ce tutoriel est mon premier et je fais appel par avance à votre sollicitude.
Il a pour but de vous exposer une manière de redimensionner une image en conservant ses proportions (largeur et hauteur) de façon à l'insérer proprement dans vos scripts (news, diaporama…).

Il est évident que pour des raisons de clarté, je ne présenterai pas ici la marche à suivre pour créer un système complet de news ou une galerie d'images.

Nous commencerons donc par faire un rappel du formulaire qui sera utilisé pour l'upload de l'image. Nous verrons ensuite quelles sont les fonctions qui seront utilisées en faisant référence à la doc. Enfin, nous passerons doucement à la pratique. ;)

Dans ce tutoriel, j'utiliserai principalement des images au format JPEG et vérifierai les extensions en conséquence, mais vous pourrez très facilement adapter le script à l'utilisation d'autres formats (comme GIF ou PNG par exemple), à condition de ne pas oublier d'utiliser les fonctions associées qui, bien que peu connues, sont indispensables : tout le monde emploie imagecreatefromjpeg, mais il existe imagecreatefromgif ou encore imagecreatefrompng (quelques précisions plus bas). Idem pour la fonction imagejpeg : imagegif et imagepng existent bel et bien. ;)
Il suffira pour vous d'assurer un minimum la sécurisation des données et de suivre les recommandations pour l'utilisation des autres formats.

O.K. ? Alors c'est parti !

Quelques rappels utiles…

On partira du principe (puisque c'est mon cas) que vous disposez d'un système de news et que vous voulez insérer, pour chacune des nouvelles news, une image ou une photo. Mais le problème est de taille : vous avez assuré une mise en page qui vous plaît et la photo est trop grande !

Je précise encore une fois qu'il s'agit d'un exemple d'utilisation qui ne saurait constituer l'unique façon de mettre à profit ce script !

Comment faire ?

Je vais tout vous dire… don't worry. :)

Commençons par ajouter à notre formulaire de saisie de news un espace dédié à l'upload de notre image (si vous n'y connaissez rien en upload de fichier, vous devez absolument faire un tour par là).
Je vous rappelle simplement que :

  • si vous voulez uploader un fichier, comme une image, il faudra modifier l'enctype de votre balise <form> ;

  • vous devez assurer une première restriction sur l'insertion de l'image en maximisant la taille d'envoi à 2 Mo par exemple (poids maximum autorisé par défaut pour l'upload d'un fichier, fixé dans la configuration d'Apache et de PHP, mais qu'il faudra pourtant contraindre) grâce à un input en hidden ;

  • le type de l'input change car on ne charge plus du texte, mais un fichier…

Comment, vous trouvez cela compliqué ? Mais non, c'est on ne peut plus simple !
Je vous laisse deux petites minutes pour réaliser ce bête formulaire…

Ça y est ? Alors, correction :

<form method="post" action="news.php" enctype="multipart/form-data"> <fieldset class="formulaire_news"> <p> <label for="titre">Titre :</label> <input type="text" name="TitreNews" id="titre" /> </p> <p> <label for="image">Image : </label> <input type="hidden" name="MAX_FILE_SIZE" value="2097152" /> <input type="file" name="ImageNews" id="image" /> </p> <p> <label for="contenu">Contenu :</label> <textarea cols="40" rows="3" name="ContenuNews"></textarea> </p> <p> <input type="submit" name="InsererNews" value="Insérer" /> <input type="reset" name="Recommencer" value="Recommencer" /> </p> </fieldset> </form>

J'ai bien évidemment allégé volontairement le formulaire. Vous devriez avoir un champ auteur en plus, non ?
Vous remarquerez que j'appelle une page de traitement que j'ai sobrement nommée news.php : vous pouvez la renommer en fonction de vos souhaits.

Voilà, la première sous-partie est terminée.

Si vous avez des soucis de compréhension concernant cette petite mise au point, n'hésitez pas à aller faire un tour sur le tuto de DHKold.

Maintenant, on passe à la présentation des fonctions que nous utiliserons dans le script de redimensionnement.

Des fonctions très… graphiques

Voici la liste des fonctions que nous utiliserons dans le script de redimensionnement, en partant du principe que vous désirez utiliser une image au format JPEG :

  • explode ;

  • strtolower ;

  • imagecreatefromjpeg ;

  • getimagesize ;

  • imagecreatetruecolor ;

  • imagecopyresampled ;

  • imagedestroy ;

  • imagejpeg.

Je les ai fait figurer dans l'ordre de leur utilisation dans le script.
Le format choisi étant JPEG, deux des fonctions utilisées se termineront par jpeg. Mais, comme je vous le dis depuis le début, vous pourrez utiliser les formats PNG et GIF en utilisant lesdites fonctions adaptées (imagecreatefromgif, imagecreatefrompng et imagegif ou imagepng).
Il est fort possible que vous connaissiez et maîtrisiez les fonctions explode et strtolower, mais que les autres vous paraissent « barbares ». Pas de panique, je vais tout vous expliquer (dans la mesure de mes compétences, et en m'aidant de la documentation PHP).

La fonction explode

La fonction explode coupe une chaîne en segments. Il s'agit plus exactement d'une fonction qui retourne un tableau (array) de chaînes issues d'une variable, en utilisant un délimiteur.

Oh là, doucement, vieux ! C'est compliqué, ton truc !

D'accord, un petit exemple est plus parlant :

<?php //Je pose ma variable : $variable = "Je veux couper ma variable. Mais je la veux en plusieurs chaînes"; //J'utilise mon array explode : $chaine = explode('.', $variable); // Mon délimiteur est le point, ma variable est $variable. Donc explode va couper en chaînes tout ce qui se trouve de part et d'autre du point. //J'affiche mes chaînes, dont la numérotation commence à zéro : echo $chaine[0]; //Ceci va retourner "Je veux couper ma variable" echo $chaine[1]; //Ceci va retourner "Mais je la veux en plusieurs chaînes" ?>

L'erreur la plus fréquente est l'inversion des paramètres d'explode à l'intérieur des parenthèses. Il faut respecter scrupuleusement l'ordre des paramètres, contrairement à implode().

Vous avez compris ?

Vous pouvez très bien limiter le nombre de chaînes que vous voulez retourner en utilisant, et ce, depuis PHP 4.0.1, le paramètre limit juste avant de fermer la parenthèse.
Exemple : $chaine = explode('.', $variable, 1), auquel cas dans mon exemple précédent, la seule ($limit = 1) chaîne retournée sera : « Je veux couper ma variable ».
Depuis PHP 5, il est même possible d'utiliser une limite négative comme -1. Vous verrez plus tard son utilité. ;)

La fonction strtolower

Vous vous êtes aperçus bien souvent que les images pouvaient être nommées avec l'extension .jpg / .JPG, .jpeg / .JPEG, .gif / .GIF ou encore .png / .PNG.
Pour éviter tout problème d'interprétation lié à la sensibilité de PHP à la casse, nous utiliserons la fonction strtolower, dont l'effet est de convertir une chaîne en minuscules (sauf les voyelles accentuées, mais ici, on s'en fiche ^^ ).
Cette fonction va nous permettre plus tard de nous assurer de l'extension du fichier à uploader.

La fonction imagecreatefromjpeg

Cette fonction va se montrer déterminante, puisqu'elle va nous permettre de créer une nouvelle image à partir de celle que nous choisirons.
Elle s'utilise très simplement :

<?php $NouvelleImage = imagecreatefromjpeg ($ImageChoisie); ?>

Vous pouvez très bien utiliser un chemin de type URL pour votre variable $ImageChoisie à condition d'avoir préalablement activé l'option des fopen wrappers. Pour cela, il faut aller jeter un œil ici.

Cette nouvelle image reste « virtuelle », et nous allons la modifier par la suite.

Remarque 1 : si vous utilisez la fonction équivalente pour les images de format PNG (imagecreatefrompng), assurez-vous que l'image de départ que vous choisissez ne dépasse pas un nombre total de 1 040 000 pixels, soit une résolution d'environ 1040 x 1000. En effet, la fonction imagecreatefrompng ne semble pas efficiente pour un nombre de pixels supérieur… Allez savoir pourquoi, là je sèche !
De plus, si vous travaillez sur des PNG 24 permettant la transparence, il vous faudra activer le canal alpha et sauvegarder (imagecolorallocatealpha).

Remarque 2 : si vous utilisez la fonction équivalente pour les images de format GIF (imagecreatefromgif), vous devez disposer des librairies GD dans leur version inférieure à 1.6, ou supérieure à 2.0.28. Entre ces deux versions, le format n'est pas supporté par GD.

Remarque 3 : les versions Windows de PHP antérieures à la version 4.3.0 ne supportent pas l'accès aux fichiers distants avec ces fonctions, même si la directive allow_url_fopen est activée dans le php.ini.

La fonction getimagesize

Pour ceux qui maîtrisent la langue de Shakespeare, ce nom est facile à comprendre.

  • Get : déterminer, prendre, obtenir.

  • Image : …

  • Size : taille.

Cette fonction retourne un array comprenant les dimensions de l'image, dont les deux premières entrées nous intéressent particulièrement. Pour l'utiliser, il vous suffit d'écrire ce bout de code :

<?php $TailleImage = getimagesize ($ImageChoisie); ?>

Ceci retourne entre autres $TailleImage[0], qui correspond à la largeur de l'image (width), et $TailleImage[1], qui correspond à la hauteur de l'image (height).

On pourrait également utiliser les entrées $TailleImage['bits'], qui nous retourne le nombre de bits ou $TailleImage['mime'] qui nous retourne… le type MIME ! Eh oui !

Cette fonction va être utile pour déterminer, au départ, les dimensions de l'image que l'on souhaite redimensionner, mais surtout pour connaître le ratio largeur / hauteur, afin de redimensionner en conservant les proportions. ;) Elle nous servira enfin à vérifier, de manière certaine, le type MIME du fichier uploadé.

Cette fonction ne requiert pas GD.

La fonction imagecreatetruecolor

Cette fonction sera, dans notre exemple, indissociable de la fonction imagecreatefromjpeg.
En effet, imagecreatetruecolor crée une nouvelle image en couleurs vraies, autrement dit une image noire dont il faudra préciser la largeur et la hauteur.
Exemple :

<?php $ImageEnCouleursVraies = imagecreatetruecolor(800, 600); ?>

Cette nouvelle image en couleurs vraies correspondra en fait à l'ébauche de notre image redimensionnée, O.K. ?

Remarque : cette fonction ne fonctionne pas avec le format GIF. De plus, elle requiert la bibliothèque GD en version au moins 2.0.1 (la 2.0.28 ou supérieure est recommandée).
Toutefois, il est possible de passer outre cette embûche en utilisant simplement la fonction imagecreate comme ceci :

<?php imagecreate(int x_size, int y_size); ?> La fonction imagecopyresampled

La fonction magique ! Elle copie, redimensionne et ré-échantillonne notre nouvelle image.
Toutefois, son interprétation est un peu plus complexe. Voyons ensemble :

<?php imagecopyresampled($NouvelleImage, $ImageDepart, $CoordonneeXduPointdeDestination, $CoordonneeYduPointdeDestination, $CoordonneeXduPointSource, $CoordonneeYduPointSource, $NouvelleLargeur, $NouvelleHauteur, $LargeurImageDepart, $HauteurImageDepart); ?>

Arf, c'est quoi ce charabia ? >_

Bon, quelques explications s'imposent.

  • $NouvelleImage est l'image que l'on veut obtenir après redimensionnement.

  • $Imagedepart est l'image que nous avons choisie.

  • $CoordonneeXduPointdeDestination se détermine par rapport à $CoordonneeXduPointSource. C'est un chiffre, 0 (zéro) si vous ne voulez pas créer de décalage par rapport à l'image de départ, fixée au coin supérieur gauche par référence.

  • Idem pour $CoordonneYduPointdeDestination.

  • $NouvelleLargeur constitue la nouvelle dimension width attendue pour notre image redimensionnée.

  • $NouvelleHauteur suit le même principe.

  • Les deux dernières variables sont généralement déterminées par la fonction getimagesize.

Vous aurez donc compris l'intérêt sans équivoque de l'appel de cette fonction. ;)

Attention : erreur fréquente ! Il arrive souvent, lorsque l'on fait appel à cette fonction, de se retrouver avec une image dont les couleurs n'ont plus rien à voir avec celles de l'image de départ : une image toute bleue, par exemple.
Pourquoi ? Parce que toutes les couleurs utilisées pour former l'image ne peuvent pas toujours être allouées. :'( La couleur la plus proche (en théorie) est alors utilisée. Je dis bien « en théorie » ! Car souvent, ce n'est pas visuellement la couleur la plus proche !

Pour éviter ce genre de mauvaise surprise, il convient d'utiliser la fonction précédemment citée, imagecreatetruecolor, avant de passer par imagecopyresampled.

La fonction imagedestroy

Bon, eh bien là, c'est clair !
Cette fonction détruit purement et simplement l'image dont on ne veut plus.

Et devinez laquelle ne nous servira plus ?

Réponse : l'image originale bien sûr ! ;)
Seulement, il faudra utiliser comme paramètre la variable retournée par l'une...

Appeler le centre

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

[GD] Redimensionner une image sans la déformer

Prix sur demande