Crop sur images avec plusieurs champs et fonctionnalités étendues

Extensions jpg, jpeg, png, gif

prévisualisation max :

Aucun fichié sélectionné
Exemple de crop multiple sur plusieurs champs de type file. Les valeurs des imputs et des crop sont enregistrés pour permettre de réintégrer ces valeurs si on re sélectionne les mêmes fichiers avant l'envoi du formulaire.

Le crop est réalisé avec le module Jquery "imAareaSelect". Un mode d'emploi est fourni dans le dossier "javascript". Dans ce mode d'emploi, j'ai remplacé l'option "fadeSpeed" par "fadeDuration" car le code de la dernière version 1.0.0-rc.1 utilise "fadeDuration" mais la doc sur le web n'a pas été mise à jour.

Côté client, on utilise les fonctions événementielles de la classe javascript pour initialiser le script du Crop. Utilisez "console.log()" pour parcourir les objets javascript retournés en paramètre par les fonctions événementielles et comprendre les propriétés utilisées dans le script. Voir également le mode d'emploi, fonctions événementielles et contenu des objets spécifiques à chaque fichier.

Côté serveur, le script "UploadAjaxABCI_Upload_Crop_multiple.php" permet en option de faire un redimensionnement proportionnel pour limiter la taille de l'image avec ou sans crop.

Lorsque la mémoire est insuffisante pour effectuer le crop côté serveur, un message approprié sera affiché en retour par la méthode "catchErrorServer()" (voir le fichier "UploadAjaxABCI_Upload_Crop_multiple.php"). La configuration actuelle de cette méthode préserve la sauvegarde des fichiers*. A défaut de pouvoir retoucher l'image cela permet néanmoins de la télécharger sans avoir à attendre une nouvelle fois pour son chargement lors d'une prochaine sélection.

A noter que dans des cas limites, une image pourra être cropée si l'on sélectionne une petite zone mais pas une grande (l'image peut être ouverte "de justesse" mais le serveur ne dispose plus suffisamment de mémoire disponible pour terminer le processus).

Notes :
- Si les deux valeurs du sélecteur de dimension des images de prévisualisation sont égales à "auto", les images occuperont toute la largeur disponible du formulaire.
- * La méthode "saveAll()" utilisée côté php permet d'effectuer une sauvegarde pour tous les fichiers tant qu'ils n'ont pas été traités.
- Pour supprimer l'upload multiple il suffit de supprimer la propriété multiple="multiple" dans le champ input de type file.
- Le code javascript est difficile pour les débutants puisqu'il utilise à la fois des méthodes de la classe d'upload et des méthodes du plugin "imgAreaSelect". Néanmoins il est conçu de manière générique de sorte qu'il n'a pas besoin d'être modifié tant que vous supprimez des éléments HTML qui vous sont inutiles : champ "légende", boutons radios, tableau d'informations de crop, liens "arrêt", "arrêter tout", etc. Dans l'absolu seul le champ de prévisualisation des vignettes est nécessaire pour faire le crop et permettre un traitement correct côté php, néanmoins je vous conseille de garder au minimum l'information de status du fichier.
Cependant si vous modifier le nom des classes ou des champs dans le html il faudra en faire de même dans la configuration des variables définies au début du code javascript. Suppression du html possible "sans précaution", mais modification avec précautions.

Index