Exigence technique : composant pour recadrer une image
Objectif :
Développer un composant personnalisé à partir de zéro (Vue + TypeScript) qui permet à l'utilisateur de télécharger une image, de sélectionner une zone pour le recadrage et d'obtenir le résultat sous forme de coordonnées.
Exigences fonctionnelles :
1. Composant autonome
- Le composant doit être entièrement autonome, écrit à partir de zéro.
- Utiliser Vue et TypeScript.
2. Chargement et affichage de l'image
- Prévoir une fenêtre (zone de visualisation) où l'image peut être insérée.
- La zone doit avoir une largeur et une hauteur maximales définies.
- Si l'image dépasse les dimensions de la zone, elle doit être automatiquement mise à l'échelle pour s'adapter à la taille de la fenêtre (sans dépasser les limites de l'écran).
3. Sélection de la zone pour le recadrage
- Après le chargement, l'image s'affiche dans la fenêtre.
- L'utilisateur doit pouvoir sélectionner une zone pour le recadrage avec la souris.
- zone arbitraire (sans rapport d'aspect fixe).
4. Enregistrement du résultat
- Le bouton "Enregistrer" déclenche un événement ou une méthode.
- En résultat, les coordonnées de la zone sélectionnée pour le recadrage sont renvoyées.
- La réalisation du recadrage sur le serveur n'est pas requise.
middle+
