Adapter les images avant de les uploader

Présentation

Le Plugin Upload Image permet de simplifier et de centraliser le framework d'upload d'image offrant la possibilité de croper les images. Il fournit des fichiers JavaScript et des macros Freemarker permettant de créer des inputs de type "fichier" afin de réaliser des uploads d'images, des fonctions JavaScript permettant de zoomer, tourner, déplacer, désactiver, activer et croper les images avant l'upload.

Les sources de la version en cours du plugin Upload Image sont disponibles à cette adresse. Il utilise actuellement le plugin jQuery Cropper.

Utilisation du plugin

Afin d'utiliser le plugin Upload Image, il faut effectuer 4 opérations :

• Inclure le plugin Upload Image et l'activer.
• Créer et assigner les options du crop.
• Inclure dans le HTML généré un fichier JavaScript fourni par la JSP accessible à l’adresse jsp/site/plugins/uploasimage/GetMainUploadJs.jsp.
• Ajouter dans le formulaire des inputs de type image permettant de réaliser des uploads d'image à l'aide des macros Freemarker.

Chaque input créé avec la macro Freemarker correspondante est identifié par son nom (attribut fieldName de la macro), le chemin de l'image ou son contenu(attribut file) et une classe css (cssClass).

Inclusion du plugin

Le plugin peut être déclaré comme une dépendance d'un autre plugin Lutèce dans son pom.xml grâce au code suivant :

<dependency>
    <groupId>fr.paris.lutece.plugins</groupId>
    <artifactId>plugin-uploadimage</artifactId>
    <version>[1.0.0-SNAPSHOT,)</version>
    <type>lutece-plugin</type>
</dependency>

Création des options du crop

Dans le back office créer les options à associer au crop (lien uploadimage). Pour consulter la description des différentes options : https://github.com/fengyuanchen/cropper.

/**
 * Macro permettant d'inclure les fichiers JavaScript et CSS nécessaires au fonctionnement des inputs d'upload image et du crop.
 * Cette macro doit être utilisées si le service d'inclusion du portail Lutèce ne fonctionne pas (exemple : dans le Back Office, dans des JSP spécifiques, ...)
 */
<#macro addRequiredJsUploadImages >

/**
 * Macro permettant d'ajouter un input et un bloc de type image initialisé pour l'upload de l'image.
 * Cette macro créera également un bloc permettant d'afficher l'image uploadé.
 * @param fieldName Nom de l'input à générer.
 * @param file le src de l'image, la valeur par défaut une chaine vide.
 * @param inputCssClass Classe CSS à ajouter à l'input généré. La valeur par défaut est une chaîne de caractères vide.
 * @param synchronus:  mettre false à la création et true lors d'un update.
 */
<#macro cropimage  fieldName  file  cssClass  synchronous>

Exemple d'inclusion :

/*
 * images/admin/skin/plugins/uploadimage/picture.jpg: image par defaut du plugin.
 */

<@cropimage  fieldName= "fieldname"  file="images/admin/skin/plugins/uploadimage/picture.jpg"  cssClass=""  synchronous="false"/>