Crop-manager, un composant React

Son usage est très simple : l’image se manipule à la souris, la touche shift permet de passer du mode déplacement au mode échelle / rotation. Sur les appareils tactiles, ces memes opérations se font à un ou deux doigts.

Les fonctionnalités

• déplacement, mise à l’échelle et rotation libres,
• symétrie horizontale et verticale, basculement,
• cadrages prédéfinis.
• rendu optimisé par accentuation de la netteté.
• support tactile
• éditeur responsive, l’image éditée utilise toute la surface disponible, indépendamment de ses dimensions propres.

crop-manager opère entièrement dans le navigateur. Les données de cadrage sont disponibles pour un traitement coté serveur.

L’image et le cadrage sont liés.

Le cadre est défini par une dimension et un ratio. Par convention, la dimension est établie comme la diagonale de l’image ; le ratio est une valeur fixée par l’utilisateur. Dimension et ratio donnent les proportions initiales du cadre. Le cadre et l’image sont alignés sur leur point central.

Le cadrage est le résultat de la transformation appliquée à l’image sur cette base : échelle, rotation et translation, exprimée en pourcentages.

Les dimensions relatives permettent d’utiliser des sources de différentes tailles, légères coté utilisateur, et complètes coté serveur. Seules les données de cadrage sont transmises.

Les valeurs du cadre données en pixels servent au rendu final. Seul le ratio largeur/hauteur est employé par le module. Cela autorise à générer simplement plusieurs rendus d’échelle différentes.

La demo de crop-manager

La source de l'app sur Github

Vous avez des remarques ou des idées pour améliorer ce composant ? N'hésitez pas à m'en parler.