Τεχνική απαίτηση: συστατικό για περικοπή εικόνας
Στόχος:
Να αναπτύξετε ένα δικό σας συστατικό από το μηδέν (Vue + TypeScript) που θα επιτρέπει στον χρήστη να ανεβάζει μια εικόνα, να επιλέγει μια περιοχή για περικοπή και να λαμβάνει το αποτέλεσμα με τη μορφή συντεταγμένων.
Απαιτήσεις λειτουργικότητας:
1. Ανεξάρτητο συστατικό
- Το συστατικό πρέπει να είναι πλήρως αυτόνομο, γραμμένο από το μηδέν.
- Να χρησιμοποιεί Vue και TypeScript.
2. Φόρτωση και εμφάνιση εικόνας
- Να προβλέπει ένα παράθυρο (περιοχή προεπισκόπησης) όπου μπορεί να εισαχθεί η εικόνα.
- Η περιοχή πρέπει να έχει ορισμένο μέγιστο πλάτος και ύψος.
- Αν η εικόνα υπερβαίνει τις διαστάσεις της περιοχής, να κλιμακώνεται αυτόματα για να ταιριάζει στο μέγεθος του παραθύρου (χωρίς να ξεπερνά τα όρια της οθόνης).
3. Επιλογή περιοχής για περικοπή
- Μετά τη φόρτωση, η εικόνα εμφανίζεται στο παράθυρο.
- Ο χρήστης πρέπει να μπορεί να επιλέξει μια περιοχή για περικοπή με το ποντίκι.
- τυχαία περιοχή (χωρίς σταθερή αναλογία πλευρών).
4. Αποθήκευση αποτελέσματος
- Το κουμπί "Αποθήκευση" ενεργοποιεί ένα συμβάν ή μέθοδο.
- Ως αποτέλεσμα, επιστρέφονται οι συντεταγμένες της επιλεγμένης περιοχής περικοπής.
- Δεν απαιτείται η υλοποίηση της διαδικασίας περικοπής στον διακομιστή.
middle+
