Comment créer dynamiquement des vignettes

Dans le screencast de cette semaine, je vais vous montrer comment télécharger des fichiers, puis que PHP crée dynamiquement une vignette. Que vous construisiez un site de commerce électronique ou juste une simple galerie, ces techniques s'avéreront certainement utiles. Si vous êtes prêt pour votre screencast "spoonfed" de la semaine, allons-y!

* Remarque - Quelques légères modifications ont été apportées au code après quelques réflexions supplémentaires et d'excellentes suggestions. Ne vous inquiétez pas, très peu de choses ont changé. Juste un peu de nettoyage. Vous pouvez consulter les modifications ci-dessous et / ou télécharger le code source..

Le fichier de configuration simple

La première étape consiste à créer un fichier de configuration simple dans lequel nous pouvons stocker quelques variables. En les plaçant dans leur propre fichier, nous pouvons facilement modifier notre code sans avoir à modifier beaucoup de lignes..

 $ final_width_of_image = 100; $ path_to_image_directory = 'images / fullsized /'; $ path_to_thumbs_directory = 'images / thumbs /';

$ final_width_of_image - Cette variable stockera la largeur de notre vignette.
$ path_to_image_directory - Cela stocke le chemin d'accès à notre dossier d'images pleine taille
$ path_to_thumbs_directory - Ceci stocke le chemin de notre répertoire de vignettes complet

Enregistrez ce fichier sous le nom 'config.php' et placez-le à la racine de votre dossier..

Le HTML

Ensuite, créez une nouvelle page appelée "index.php" et collez ce qui suit.

       Miniatures dynamiques   Télécharger un fichier, homme!

Tout d’abord, descendez un peu jusqu’à la balise body. Pour garder les choses aussi simples que possible, j'ai créé un formulaire extrêmement simple. Mais le travail sera bien fait.

Chaque fois que vous travaillerez avec le type d'entrée "upload de fichier", vous devez ajouter un attribut "enctype" à la balise de formulaire..

   Plutôt que de publier sur une page différente, nous allons simplement écrire le code dans notre document principal. Pour ce faire, nous allons définir l'attribut d'action égal à cette page.
  action = " Maintenant, retournez au code PHP en haut. Nous avons besoin de deux fichiers. Le premier est le fichier de configuration que nous venons de créer. Le second est "functions.php" - que nous allons créer sous peu.
  Ensuite, nous vérifions si la page a été postée. Si tel est le cas, nous vérifierons ensuite si le fichier choisi par l'utilisateur est un "jpg", un "gif" ou un "png". Nous pouvons le faire en comparant le nom du fichier avec une expression régulière.
  if (preg_match ('/ [.] (jpg) | (gif) | (png) $ /', $ _FILES ['fupload'] ['nom']))
  Pour en savoir plus sur les expressions régulières, regardez ce screencast..
  En chemin, nous créons quelques variables.
   $ filename - Stocke le nom du fichier que l'utilisateur a choisi de télécharger.
  $ source - Lorsque le bouton d'envoi est cliqué, le fichier sera enregistré dans un répertoire temporaire. Cette variable stockera ce chemin.
  $ cible - Cela va stocker le chemin de l'endroit où l'image téléchargée doit être sauvegardée.
 
 Sauvegarder le fichier
  La dernière étape consiste à déplacer le fichier du répertoire temporaire dans notre dossier "images / fullsized". Nous pouvons le faire en appelant le fonction move_uploaded_file (). Nous allons passer dans deux paramètres. Le premier doit connaître le chemin du dossier temporaire. La seconde doit savoir où sauvegarder le fichier. ($ source et $ target, respectivement)
  move_uploaded_file ($ source, $ target);
 Création de la miniature
  Plutôt que de stocker tout le code dans notre page index.php, créons une autre page appelée "functions.php". Créez et ouvrez ce nouveau fichier et écrivez une nouvelle fonction appelée "createThumbnail ()".
  function createThumbnail ($ filename) require 'config.php'; if (preg_match ('/ [.] (jpg) $ /', $ filename)) $ im = imagecreatefromjpeg ($ path_to_image_directory. $ filename);  else if (preg_match ('/ [.] (gif) $ /', $ filename)) $ im = imagecreatefromgif ($ path_to_image_directory. $ filename);  else if (preg_match ('/ [.] (png) $ /', $ filename)) $ im = imagecreatefrompng ($ path_to_image_directory. $ filename);  $ ox = imagesx ($ im); $ oy = imagesy ($ im); $ nx = $ final_width_of_image; $ ny = floor ($ oy * ($ final_width_of_image / $ ox)); $ nm = imagecreatetruecolor ($ nx, $ ny); copecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ oy); if (! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) (Il y avait un problème. Veuillez réessayer! ");  imagejpeg ($ nm, $ path_to_thumbs_directory. $ filename); $ tn = ''; $ tn. = '
Toutes nos félicitations. Votre fichier a été téléchargé avec succès et une vignette a été créée. '; echo $ tn; 
  Nous allons commencer par exiger à nouveau le fichier "config.php". Ensuite, nous vérifierons si l'utilisateur a sélectionné un "jpg", un "gif" ou un "png". Nous devons le faire car PHP nécessite une fonction différente selon le fichier: "imagecreatefromjpeg", "imagecreatefromgif", "imagecreatefrompng".
     Après cela, nous devons stocker les valeurs de largeur et de hauteur de l'image que l'utilisateur a choisi de télécharger. Nous pouvons le faire en appelant "imagesx" et "imagesy", respectivement.
  $ ox = imagesx ($ im); $ oy = imagesy ($ im);
  Ensuite, nous allons créer deux autres variables qui stockeront les valeurs de largeur et de hauteur pour la vignette qui sera bientôt créée..
   $ nx - est égal à la valeur de notre fichier de configuration: 100
  $ ny. Nous aurons besoin de quelques calculs simples pour trouver la correction de hauteur proportionnelle.
 
  $ nx = $ final_width_of_image; $ ny = floor ($ oy * ($ final_width_of_image / $ ox));
 ImageCreateTrueColor
     Dans notre cas, nous passons les variables "$ nx" et "$ ny" que nous venons de créer.
 Copie d'image redimensionnée
     copecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ oy);
 Enregistrer la vignette
  Les étapes finales nécessitent que nous vérifiions si un dossier "vignettes" existe. Si ce n'est pas le cas, nous le créerons en utilisant "mkdir". Ensuite, nous allons sortir notre nouvelle image dans le dossier des vignettes.
  if (! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) (Il y avait un problème. Veuillez réessayer! "); 
     Enfin, nous devons faire écho à la vignette pour montrer à l'utilisateur que son image a été téléchargée avec succès..
  $ tn = ''; $ tn. = '
Toutes nos félicitations. Votre fichier a été téléchargé avec succès et une vignette a été créée. '; echo $ tn;
 Fini
  Bien joué! Ce screencast a été fait un peu à la hâte - à cause des contraintes de temps. Vous voudrez peut-être nettoyer le code un peu et un peu plus la gestion des erreurs.
  Si vous souhaitez aller plus loin, voyez si vous pouvez comprendre comment rogner les images également! Comme toujours, je suis plus que ouvert au raffinement et aux suggestions!
  Abonnez-vous au flux RSS NETTUTS pour plus de commentaires et d'articles sur le développement Web au quotidien.
 
  
 



		
			
	   
	




Code