Requisito tecnico: componente per il ritaglio delle immagini
Obiettivo:
Sviluppare un componente personalizzato da zero (Vue + TypeScript) che consenta all'utente di caricare un'immagine, selezionare un'area per il ritaglio e ottenere il risultato sotto forma di coordinate.
Requisiti funzionali:
1. Componente autonomo
- Il componente deve essere completamente indipendente, scritto da zero.
- Utilizzare Vue e TypeScript.
2. Caricamento e visualizzazione dell'immagine
- Prevedere una finestra (area di anteprima) in cui inserire l'immagine.
- L'area deve avere una larghezza e altezza massime definite.
- Se l'immagine supera le dimensioni dell'area, deve essere automaticamente scalata per adattarsi alla dimensione della finestra (senza uscire dai limiti dello schermo).
3. Selezione dell'area per il ritaglio
- Dopo il caricamento, l'immagine viene visualizzata nella finestra.
- L'utente deve poter selezionare un'area per il ritaglio con il mouse.
- area arbitraria (senza rapporto di aspetto fisso).
4. Salvataggio del risultato
- Il pulsante "Salva" attiva un evento o un metodo.
- Come risultato, vengono restituite le coordinate dell'area selezionata per il ritaglio.
- Non è necessario implementare il processo di ritaglio sul server.
middle+
