ImageMark and FileServer Documentation

Overview

This solution includes two projects:

1. FileServer - A simple server used to serve image files from the wwwroot directory.
2. ImageMark - A Blazor WebAssembly application for marking images with rectangles and brush strokes.

Configuration

For simplicity, server addresses are hardcoded in Program.cs for:

• CORS configuration in FileServer
• HttpClient base address in ImageMark

Ensure these addresses match your local development environment or modify them as needed.

FileServer

FileServer serves images located in the wwwroot subdirectories. This project is used to provide image data to the ImageMark application.

ImageMark

ImageMark is a Blazor WebAssembly application for annotating images. Users can:

• View images in a gallery.
• Open images in full resolution and add annotations to them.
• Save marked images permanently to the server.

How to Run

1. Start FileServer on https://localhost:44353
2. Start ImageMark on https://localhost:44395

Potential Improvements

1. Testing: There are currently no tests for:
   • ImageEditor component
   • ServerStorageService
   • CanvasService
2. Annotation Customization: Allow users to select stroke size and color for annotations.
3. User Experience: Close the ImageEditor when the user:
   • Clicks "gallery" in the navigation bar.
   • Clicks outside the editor.
4. Annotation delete:
   • When an annotation is deleted, another delete button may appear in the same position, but the necessary events won't get fired to highlight the new annotation.
   • Annotation highlight for touch devices.
5. Thumbnail Loading for Gallery
6. Drawing on scroll click:
   • When the user scrolls large image it shouldn't draw on the canvas.