Technical task: component for image cropping
Goal:
Develop your own component from scratch (Vue + TypeScript) that allows users to upload an image, select an area for cropping, and get the result as coordinates.
Functional requirements:
1. Separate component
- The component must be fully standalone, written from scratch.
- Use Vue and TypeScript.
2. Upload and display image
- Provide a window (view area) where an image can be inserted.
- The area should have specified maximum width and height.
- If the image exceeds the size of the area, it should automatically scale to fit the window (without going beyond the screen borders).
3. Select cropping area
- After uploading, the image is displayed in the window.
- The user should be able to select an area for cropping with the mouse.
- Arbitrary area (without fixed aspect ratio).
4. Save result
- The 'Save' button triggers an event or method.
- The coordinates of the selected cropping area are returned.
- The cropping process on the server side is not required.
middle+
