Cerinta tehnică: component pentru decuparea imaginii
Obiectiv:
Dezvoltarea unui component propriu de la zero (Vue + TypeScript) care să permită utilizatorului să încarce o imagine, să selecteze o zonă pentru decupare și să obțină rezultatul sub formă de coordonate.
Cerinte funcționale:
1. Componentă independentă
- Componentei trebuie să îi fie complet autonomă, scrisă de la zero.
- Utilizarea Vue și TypeScript.
2. Încărcarea și afișarea imaginii
- Asigurați o fereastră (zonă de previzualizare) în care se poate insera imaginea.
- Zona trebuie să aibă o lățime și o înălțime maxime definite.
- Dacă imaginea depășește dimensiunile zonei, aceasta trebuie redimensionată automat pentru a se potrivi cu dimensiunea ferestrei (fără a ieși din limitele ecranului).
3. Selectarea zonei pentru decupare
- După încărcare, imaginea este afișată în fereastră.
- Utilizatorul trebuie să poată selecta o zonă pentru decupare cu mouse-ul.
- zonă arbitrară (fără raport fix de aspect).
4. Salvarea rezultatului
- Butonul "Salvează" declanșează un eveniment sau o metodă.
- Ca rezultat, se returnează coordonatele zonei selectate pentru decupare.
- Nu este necesar să implementați procesul de decupare pe server.
middle+
