Requisito técnico: componente para recortar imágenes
Objetivo:
Desarrollar un componente propio desde cero (Vue + TypeScript) que permita a los usuarios cargar una imagen, seleccionar un área para recortar y obtener el resultado en forma de coordenadas.
Requisitos funcionales:
1. Componente independiente
- El componente debe ser completamente autónomo, escrito desde cero.
- Utilizar Vue y TypeScript.
2. Carga y visualización de la imagen
- Proveer una ventana (área de vista previa) donde se pueda insertar la imagen.
- La área debe tener un ancho y alto máximos definidos.
- Si la imagen excede las dimensiones del área, se escala automáticamente para ajustarse al tamaño de la ventana (sin salirse de los límites de la pantalla).
3. Selección del área para recortar
- Después de cargar la imagen, esta se muestra en la ventana.
- El usuario debe poder seleccionar un área para recortar con el ratón.
- Área arbitraria (sin relación de aspecto fija).
4. Guardar el resultado
- El botón "Guardar" dispara un evento o método.
- Como resultado, se devuelven las coordenadas del área seleccionada para recortar.
- No es necesario implementar el proceso de recorte en el servidor.
middle+